immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-02-05 08:41:28 +03:00
Code Issues 26 Packages Projects Releases 10 Wiki Activity

[BUG] web ui popup menu can hide below viewport #1758

New Issue
Closed
opened 2026-02-05 03:36:44 +03:00 by OVERLORD · 2 comments
OVERLORD commented 2026-02-05 03:36:44 +03:00
Owner
Copy Link

Originally created by @jonhnet on GitHub (Dec 10, 2023).

The bug

In the web UI, when the user pops open a (...) menu, the menu can disappear below the viewport. Depending on how it lands, this can give the user the impression that they've seen all the available options, when in fact more are hiding below.

Here's what I saw when learning about configuring Libraries:

Screenshot from 2023-12-09 18-13-03

I spent a while wondering how to "Delete library", which is funny because when it does fit on the screen, it's displayed in brilliant red.

It may be worth fixing this to ensure users can discover the features where we expect them to.

The OS that Immich Server is running on

Ubuntu 22.04.3 Docker

Version of Immich Server

v1.90.2

Version of Immich Mobile App

n/a

Platform with the issue

  • Server
  • Web
  • Mobile

Your docker-compose.yml content

version: "3.8"

#
# 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}
    command: [ "start.sh", "immich" ]
    volumes:
      - ${UPLOAD_LOCATION}:/usr/src/app/upload
      - ${EXTERNAL_PATH}:/usr/src/app/external
      - /etc/localtime:/etc/localtime:ro
    env_file:
      - .env
    ports:
      - 2283:3001
    depends_on:
      - redis
      - database
      - typesense
    restart: always

  immich-microservices:
    container_name: immich_microservices
    image: ghcr.io/immich-app/immich-server:${IMMICH_VERSION:-release}
    # extends:
    #   file: hwaccel.yml
    #   service: hwaccel
    command: [ "start.sh", "microservices" ]
    volumes:
      - ${UPLOAD_LOCATION}:/usr/src/app/upload
      - ${EXTERNAL_PATH}:/usr/src/app/external
      - /etc/localtime:/etc/localtime:ro
    env_file:
      - .env
    depends_on:
      - redis
      - database
      - typesense
    restart: always

  immich-machine-learning:
    container_name: immich_machine_learning
    image: ghcr.io/immich-app/immich-machine-learning:${IMMICH_VERSION:-release}
    volumes:
      - model-cache:/cache
    env_file:
      - .env
    restart: always

  typesense:
    container_name: immich_typesense
    image: typesense/typesense:0.24.1@sha256:9bcff2b829f12074426ca044b56160ca9d777a0c488303469143dd9f8259d4dd
    environment:
      - TYPESENSE_API_KEY=${TYPESENSE_API_KEY}
      - TYPESENSE_DATA_DIR=/data
      # remove this to get debug messages
      - GLOG_minloglevel=1
    volumes:
      - tsdata:/data
    restart: always

  redis:
    container_name: immich_redis
    image: redis:6.2-alpine@sha256:60e49e22fa5706cd8df7d5e0bc50ee9bab7c608039fa653c4d961014237cca46
    restart: always

  database:
    container_name: immich_postgres
    image: postgres:14-alpine@sha256:6a0e35296341e676fe6bd8d236c72afffe2dfe3d7eb9c2405c0f3fc04500cd07
    env_file:
      - .env
    environment:
      POSTGRES_PASSWORD: ${DB_PASSWORD}
      POSTGRES_USER: ${DB_USERNAME}
      POSTGRES_DB: ${DB_DATABASE_NAME}
    volumes:
      - pgdata:/var/lib/postgresql/data
    restart: always

volumes:
  pgdata:
  model-cache:
  tsdata:

Your .env content

# You can find documentation for all the supported env variables at https://immich.app/docs/install/environment-variables

# The location where your uploaded files are stored
UPLOAD_LOCATION=/home/tenino/immich-photos
EXTERNAL_PATH=/home/tenino/photos

# The Immich version to use. You can pin this to a specific version like "v1.71.0"
IMMICH_VERSION=release

# Connection secrets for postgres and typesense. You should change these to random passwords
TYPESENSE_API_KEY=redactaroni
DB_PASSWORD=redactalero

# The values below this line do not need to be changed
###################################################################################
DB_HOSTNAME=immich_postgres
DB_USERNAME=postgres
DB_DATABASE_NAME=immich

REDIS_HOSTNAME=immich_redis

Reproduction steps

1. click circle avatar (J)
2. click Account Settings
3. Click Libraries
4. Click (...) on an external library (create one if needed)
Observe that the menu is cropped by the bottom of the browser window. Of course, this depends on the size of your browser window and where you were scrolled when clicking the (...)

Additional information

This is surely a general problem that affects all the pop-up menus similarly.

Originally created by @jonhnet on GitHub (Dec 10, 2023). ### The bug In the web UI, when the user pops open a (...) menu, the menu can disappear below the viewport. Depending on how it lands, this can give the user the impression that they've seen all the available options, when in fact more are hiding below. Here's what I saw when learning about configuring Libraries: ![Screenshot from 2023-12-09 18-13-03](https://github.com/immich-app/immich/assets/1816420/9cfdb8b6-2c94-4c8a-895b-e447e2e91262) I spent a while wondering how to "Delete library", which is funny because when it _does_ fit on the screen, it's displayed in brilliant red. It may be worth fixing this to ensure users can discover the features where we expect them to. ### The OS that Immich Server is running on Ubuntu 22.04.3 Docker ### Version of Immich Server v1.90.2 ### Version of Immich Mobile App n/a ### Platform with the issue - [ ] Server - [X] Web - [ ] Mobile ### Your docker-compose.yml content ```YAML version: "3.8" # # 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} command: [ "start.sh", "immich" ] volumes: - ${UPLOAD_LOCATION}:/usr/src/app/upload - ${EXTERNAL_PATH}:/usr/src/app/external - /etc/localtime:/etc/localtime:ro env_file: - .env ports: - 2283:3001 depends_on: - redis - database - typesense restart: always immich-microservices: container_name: immich_microservices image: ghcr.io/immich-app/immich-server:${IMMICH_VERSION:-release} # extends: # file: hwaccel.yml # service: hwaccel command: [ "start.sh", "microservices" ] volumes: - ${UPLOAD_LOCATION}:/usr/src/app/upload - ${EXTERNAL_PATH}:/usr/src/app/external - /etc/localtime:/etc/localtime:ro env_file: - .env depends_on: - redis - database - typesense restart: always immich-machine-learning: container_name: immich_machine_learning image: ghcr.io/immich-app/immich-machine-learning:${IMMICH_VERSION:-release} volumes: - model-cache:/cache env_file: - .env restart: always typesense: container_name: immich_typesense image: typesense/typesense:0.24.1@sha256:9bcff2b829f12074426ca044b56160ca9d777a0c488303469143dd9f8259d4dd environment: - TYPESENSE_API_KEY=${TYPESENSE_API_KEY} - TYPESENSE_DATA_DIR=/data # remove this to get debug messages - GLOG_minloglevel=1 volumes: - tsdata:/data restart: always redis: container_name: immich_redis image: redis:6.2-alpine@sha256:60e49e22fa5706cd8df7d5e0bc50ee9bab7c608039fa653c4d961014237cca46 restart: always database: container_name: immich_postgres image: postgres:14-alpine@sha256:6a0e35296341e676fe6bd8d236c72afffe2dfe3d7eb9c2405c0f3fc04500cd07 env_file: - .env environment: POSTGRES_PASSWORD: ${DB_PASSWORD} POSTGRES_USER: ${DB_USERNAME} POSTGRES_DB: ${DB_DATABASE_NAME} volumes: - pgdata:/var/lib/postgresql/data restart: always volumes: pgdata: model-cache: tsdata: ``` ### Your .env content ```Shell # You can find documentation for all the supported env variables at https://immich.app/docs/install/environment-variables # The location where your uploaded files are stored UPLOAD_LOCATION=/home/tenino/immich-photos EXTERNAL_PATH=/home/tenino/photos # The Immich version to use. You can pin this to a specific version like "v1.71.0" IMMICH_VERSION=release # Connection secrets for postgres and typesense. You should change these to random passwords TYPESENSE_API_KEY=redactaroni DB_PASSWORD=redactalero # The values below this line do not need to be changed ################################################################################### DB_HOSTNAME=immich_postgres DB_USERNAME=postgres DB_DATABASE_NAME=immich REDIS_HOSTNAME=immich_redis ``` ### Reproduction steps ```bash 1. click circle avatar (J) 2. click Account Settings 3. Click Libraries 4. Click (...) on an external library (create one if needed) Observe that the menu is cropped by the bottom of the browser window. Of course, this depends on the size of your browser window and where you were scrolled when clicking the (...) ``` ### Additional information This is surely a general problem that affects all the pop-up menus similarly.
OVERLORD commented 2026-02-05 03:36:57 +03:00
Author
Owner
Copy Link

@rtokala14 commented on GitHub (Dec 11, 2023):

I tried looking at the code for the context menu to see if there's a problem with positioning. This is when I came across some really weird.

The left and top values of the absolutely positioned context box are being determined using the window inner heights and weights. These calculations do take in the viewport into account. However, when the dropdown is first clicked, the height of the context menu is being registered as 0, causing the improper placement. When the dropdown is clicked on again while the menu is still open, it registers the correct height of the box and positions accordingly.

I recorded this in the video below. We can see the rect.height value being 0 when first clicked in the console.

https://github.com/immich-app/immich/assets/54463676/7d6c3bef-aa32-4680-b7cb-f1270b7ee5b9

@rtokala14 commented on GitHub (Dec 11, 2023): I tried looking at the code for the context menu to see if there's a problem with positioning. This is when I came across some really weird. The left and top values of the absolutely positioned context box are being determined using the window inner heights and weights. These calculations do take in the viewport into account. However, when the dropdown is first clicked, the height of the context menu is being registered as 0, causing the improper placement. When the dropdown is clicked on again while the menu is still open, it registers the correct height of the box and positions accordingly. I recorded this in the video below. We can see the `rect.height` value being 0 when first clicked in the console. https://github.com/immich-app/immich/assets/54463676/7d6c3bef-aa32-4680-b7cb-f1270b7ee5b9
OVERLORD commented 2026-02-05 03:37:02 +03:00
Author
Owner
Copy Link

@jrasm91 commented on GitHub (Sep 6, 2024):

This has been fixed in #10475

@jrasm91 commented on GitHub (Sep 6, 2024): This has been fixed in #10475
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
accessibility
changelog:enhancement
changelog:security
changelog:skip
changelog:translation
cli
date-time
documentation
external-library
format
good first issue
needs-answer
nice to have
sharing
tech-debt
📱mobile
🖥️web
🗄️server
🧠machine-learning
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
OVERLORD
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: immich-app/immich#1758
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?