immich icon indicating copy to clipboard operation
immich copied to clipboard

Search options layout problem due to CSS rule.

Open fanno opened this issue 8 months ago • 1 comments

I have searched the existing issues to make sure this is not a duplicate report.

  • [x] Yes

The bug

I have search to the best of my ability there is not an duplicate. Photos > show search options > See all People

The test and images appear behind the other text boxes.

I have only tried in LibreWolf (others may very i guess ...)

Image

The OS that Immich Server is running on

docker on a qnap

Version of Immich Server

v1.128.0

Version of Immich Mobile App

v1.128.0 build 186

Platform with the issue

  • [ ] Server
  • [x] Web
  • [ ] Mobile

Your docker-compose.yml content

#
# WARNING: Make sure to use the docker-compose.yml of the current release:
#
# https://github.com/immich-app/immich/releases/latest/download/docker-compose.yml
#
# The compose file on main may not be compatible with the latest release.
#

name: immich

services:
  immich-server:
    container_name: immich_server
    image: ghcr.io/immich-app/immich-server:${IMMICH_VERSION:-release}
    # extends:
    #   file: hwaccel.transcoding.yml
    #   service: cpu # set to one of [nvenc, quicksync, rkmpp, vaapi, vaapi-wsl] for accelerated transcoding
    volumes:
      # Do not edit the next line. If you want to change the media storage location on your system, edit the value of UPLOAD_LOCATION in the stack.env file
      - ${UPLOAD_LOCATION}:/usr/src/app/upload
#      - ${LIBRARY_LOCATION}:/usr/src/app/upload/library
#      - ${THUMB_LOCATION}:/usr/src/app/upload/thumbs
#      - ${ENCODED_VIDEO_LOCATION}:/usr/src/app/upload/encoded-video
#      - ${PROFILE_LOCATION}:/usr/src/app/upload/profile
      - /etc/localtime:/etc/localtime:ro
    env_file:
      - stack.env
    ports:
      - 2283:2283
    depends_on:
      - redis
      - database
    restart: always
    healthcheck:
      disable: false

  immich-machine-learning:
    container_name: immich_machine_learning
    # For hardware acceleration, add one of -[armnn, cuda, openvino] to the image tag.
    # Example tag: ${IMMICH_VERSION:-release}-cuda
    image: ghcr.io/immich-app/immich-machine-learning:${IMMICH_VERSION:-release}
    # extends: # uncomment this section for hardware acceleration - see https://immich.app/docs/features/ml-hardware-acceleration
    #   file: hwaccel.ml.yml
    #   service: cpu # set to one of [armnn, cuda, openvino, openvino-wsl] for accelerated inference - use the `-wsl` version for WSL2 where applicable
    volumes:
      - ${MODEL_CACHE_LOCATION}:/cache
    env_file:
      - stack.env
    restart: always
    healthcheck:
      disable: false

  redis:
    container_name: immich_redis
    image: docker.io/redis:6.2-alpine@sha256:2d1463258f2764328496376f5d965f20c6a67f66ea2b06dc42af351f75248792
    healthcheck:
      test: redis-cli ping || exit 1
    restart: always

  database:
    container_name: immich_postgres
    image: docker.io/tensorchord/pgvecto-rs:pg14-v0.2.0@sha256:90724186f0a3517cf6914295b5ab410db9ce23190a2d9d0b9dd6463e3fa298f0
    environment:
      POSTGRES_PASSWORD: ${DB_PASSWORD}
      POSTGRES_USER: ${DB_USERNAME}
      POSTGRES_DB: ${DB_DATABASE_NAME}
      POSTGRES_INITDB_ARGS: '--data-checksums'
    volumes:
      # Do not edit the next line. If you want to change the database storage location on your system, edit the value of DB_DATA_LOCATION in the stack.env file
      - ${DB_DATA_LOCATION}:/var/lib/postgresql/data
    healthcheck:
      test: pg_isready --dbname='${DB_DATABASE_NAME}' --username='${DB_USERNAME}' || exit 1; Chksum="$$(psql --dbname='${DB_DATABASE_NAME}' --username='${DB_USERNAME}' --tuples-only --no-align --command='SELECT COALESCE(SUM(checksum_failures), 0) FROM pg_stat_database')"; echo "checksum failure count is $$Chksum"; [ "$$Chksum" = '0' ] || exit 1
      interval: 5m
      start_interval: 30s
      start_period: 5m
    command: ["postgres", "-c", "shared_preload_libraries=vectors.so", "-c", 'search_path="$$user", public, vectors', "-c", "logging_collector=on", "-c", "max_wal_size=2GB", "-c", "shared_buffers=512MB", "-c", "wal_compression=on"]
    restart: always

volumes:
  model-cache:

Your .env content

if relevant let me know i will remove passwords ect tho.

Reproduction steps

  1. go to Photos
  2. click show search options
  3. click See all People (for need more than 1 rows worth to see the problem)

You need more than 1 row of persons to see it.

Relevant log output

client side i don't think log is relevant, let me know if it is.

Additional information

http://myimmich..../photos

<div id="people-selection" class="h-60 -mb-4">

Removing the h-60 class makes the overlap go away tho the rest of the other input stuff is now at the buttom of the page (when i start typing a name of a person the view seems to correctly resize)

http://myimmich..../_app/immutable/assets/0.CDiaNley.css

Line 1066 - 1068

.h-60 {
  /*! height:15rem; */
}

Image

its has been a while since i worked with CSS so i don't remember the best way to make the persons a "scroller" at the top if that is how you want to do it.

fanno avatar Mar 02 '25 23:03 fanno

Let me know if there is anything more i need to provide.

fanno avatar Mar 02 '25 23:03 fanno

This issue is fixed on main and will be available in the next release. Thanks

alextran1502 avatar Mar 03 '25 02:03 alextran1502