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

[BUG] Scrolling not possible outside of asset-grid #1280

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

Originally created by @fabiannagel on GitHub (Aug 26, 2023).

The bug

When viewing an album, one can only scroll with the cursor inside the main container (<section >id="asset-grid">). The whitespace left and right of the actual photo stream is a dead zone.

While improvable, such behavior is IMHO not all too bad for large screens (desktop). On mobile, however, it's easy to accidentally trigger a site reload while attempting to scroll on the right side of the screen, which is where my thumb usually is. This is especially annoying when a minimized background upload is canceled by the accidental refresh.

In general, this could be improved by making the entire page's width scrollable.

The OS that Immich Server is running on

Debian 10

Version of Immich Server

1.75.0

Version of Immich Mobile App

1.74.0 build.97

Platform with the issue

  • Server
  • Web
  • Mobile

Your docker-compose.yml content

version: "3.8"

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
    env_file:
      - .env
    depends_on:
      - redis
      - database
      - typesense
    restart: always

  immich-microservices:
    container_name: immich_microservices
    image: ghcr.io/immich-app/immich-server:${IMMICH_VERSION:-release}
    command: [ "start.sh", "microservices" ]
    volumes:
      - ${UPLOAD_LOCATION}:/usr/src/app/upload
    env_file:
      - .env
    depends_on:
      - redis
      - database
      - typesense
    restart: always

  immich-web:
    container_name: immich_web
    image: ghcr.io/immich-app/immich-web:${IMMICH_VERSION:-release}
    env_file:
      - .env
    restart: always

  typesense:
    container_name: immich_typesense
    image: typesense/typesense:0.24.0
    environment:
      - TYPESENSE_API_KEY=${TYPESENSE_API_KEY}
      - TYPESENSE_DATA_DIR=/data
    logging:
      driver: none
    volumes:
      - tsdata:/data
    restart: always

  redis:
    container_name: immich_redis
    image: redis:6.2
    restart: always

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

  immich-proxy:
    container_name: immich_proxy
    image: ghcr.io/immich-app/immich-proxy:${IMMICH_VERSION:-release}
    environment:
      # Make sure these values get passed through from the env file
      - IMMICH_SERVER_URL
      - IMMICH_WEB_URL
    ports:
      - 2283:8080
    depends_on:
      - immich-server
    restart: always

volumes:
  pgdata:
  model-cache:
  tsdata:

Your .env content

###################################################################################
# Database
###################################################################################

# NOTE: The following four database variables support Docker secrets by adding a *_FILE suffix to the variable name
# See the docker-compose documentation on secrets for additional details: https://docs.docker.com/compose/compose-file/compose-file-v3/#secrets
DB_HOSTNAME=postgres
DB_USERNAME=postgres
DB_PASSWORD=hidden
DB_DATABASE_NAME=immich

# Optional Database settings:
# DB_PORT=5432

###################################################################################
# Redis
###################################################################################

REDIS_HOSTNAME=immich_redis

# REDIS_URL will be used to pass custom options to ioredis.
# Example for Sentinel
# {"sentinels":[{"host":"redis-sentinel-node-0","port":26379},{"host":"redis-sentinel-node-1","port":26379},{"host":"redis-sentinel-node-2","port":26379}],"name":"redis-sentinel"}
# REDIS_URL=ioredis://eyJzZW50aW5lbHMiOlt7Imhvc3QiOiJyZWRpcy1zZW50aW5lbDEiLCJwb3J0IjoyNjM3OX0seyJob3N0IjoicmVkaXMtc2VudGluZWwyIiwicG9ydCI6MjYzNzl9XSwibmFtZSI6Im15bWFzdGVyIn0=

# Optional Redis settings:

# Note: these parameters are not automatically passed to the Redis Container
# to do so, please edit the docker-compose.yml file as well. Redis is not configured
# via environment variables, only redis.conf or the command line

# REDIS_PORT=6379
# REDIS_DBINDEX=0
# REDIS_USERNAME=
# REDIS_PASSWORD=
# REDIS_SOCKET=

###################################################################################
# Upload File Location
#
# This is the location where uploaded files are stored.
###################################################################################

UPLOAD_LOCATION=/home/foo/immich-photos


###################################################################################
# Typesense
###################################################################################
TYPESENSE_API_KEY=sufpe2-vokfir-zockAx
TYPESENSE_ENABLED=true

# TYPESENSE_URL uses base64 encoding for the nodes json.
# Example JSON that was used:
# [
#      { 'host': 'typesense-1.example.net', 'port': '443', 'protocol': 'https' },
#      { 'host': 'typesense-2.example.net', 'port': '443', 'protocol': 'https' },
#      { 'host': 'typesense-3.example.net', 'port': '443', 'protocol': 'https' },
#  ]
# TYPESENSE_URL=ha://WwogICAgeyAnaG9zdCc6ICd0eXBlc2Vuc2UtMS5leGFtcGxlLm5ldCcsICdwb3J0JzogJzQ0MycsICdwcm90b2NvbCc6ICdodHRwcycgfSwKICAgIHsgJ2hvc3QnOiAndHlwZXNlbnNlLTIuZXhhbXBsZS5uZXQnLCAncG9ydCc6ICc0NDMnLCAncHJvdG9jb2wnOiAnaHR0cHMnIH0sCiAgICB7ICdob3N0JzogJ3R5cGVzZW5zZS0zLmV4YW1wbGUubmV0JywgJ3BvcnQnOiAnNDQzJywgJ3Byb3RvY29sJzogJ2h0dHBzJyB9LApd

###################################################################################
# Reverse Geocoding
#
# Reverse geocoding is done locally which has a small impact on memory usage
# This memory usage can be altered by changing the REVERSE_GEOCODING_PRECISION variable
# This ranges from 0-3 with 3 being the most precise
# 3 - Cities > 500 population: ~200MB RAM
# 2 - Cities > 1000 population: ~150MB RAM
# 1 - Cities > 5000 population: ~80MB RAM
# 0 - Cities > 15000 population: ~40MB RAM
####################################################################################

# DISABLE_REVERSE_GEOCODING=false
# REVERSE_GEOCODING_PRECISION=3

####################################################################################
# WEB - Optional
#
# Custom message on the login page, should be written in HTML form.
# For example:
# PUBLIC_LOGIN_PAGE_MESSAGE="This is a demo instance of Immich.<br><br>Email: <i>demo@demo.de</i><br>Password: <i>demo</i>"
####################################################################################

PUBLIC_LOGIN_PAGE_MESSAGE=

####################################################################################
# Alternative Service Addresses - Optional
#
# This is an advanced feature for users who may be running their immich services on different hosts.
# It will not change which address or port that services bind to within their containers, but it will change where other services look for their peers.
# Note: immich-microservices is bound to 3002, but no references are made
####################################################################################

IMMICH_WEB_URL=http://immich-web:3000
IMMICH_SERVER_URL=http://immich-server:3001
IMMICH_MACHINE_LEARNING_URL=http://192.168.178.38:3003
#IMMICH_MACHINE_LEARNING_URL=true

#IMMICH_MACHINE_LEARNING_URL=http://immich-machine-learning:3003
#IMMICH_MACHINE_LEARNING_URL=false

####################################################################################
# Alternative API's External Address - Optional
#
# This is an advanced feature used to control the public server endpoint returned to clients during Well-known discovery.
# You should only use this if you want mobile apps to access the immich API over a custom URL. Do not include trailing slash.
# NOTE: At this time, the web app will not be affected by this setting and will continue to use the relative path: /api
# Examples: http://localhost:3001, http://immich-api.example.com, etc
####################################################################################

#IMMICH_API_URL_EXTERNAL=http://localhost:3001

###################################################################################
# Immich Version - Optional
#
# This allows all immich docker images to be pinned to a specific version. By default,
# the version is "release" but could be a specific version, like "v1.59.0".
###################################################################################

#IMMICH_VERSION=

Reproduction steps

1. View an album on mobile (Android 10, Chrome 116.0.5845.114).
2. Attempt to scroll on the white space left and right of the main photo stream.
3. Scrolling is not registered. Instead, Chrome triggers a reload event.

Additional information

No response

Originally created by @fabiannagel on GitHub (Aug 26, 2023). ### The bug When viewing an album, one can only scroll with the cursor inside the main container (`<section >id="asset-grid">`). The whitespace left and right of the actual photo stream is a dead zone. While improvable, such behavior is IMHO not all too bad for large screens (desktop). On mobile, however, it's easy to accidentally trigger a site reload while attempting to scroll on the right side of the screen, which is where my thumb usually is. This is especially annoying when a minimized background upload is canceled by the accidental refresh. In general, this could be improved by making the entire page's width scrollable. ### The OS that Immich Server is running on Debian 10 ### Version of Immich Server 1.75.0 ### Version of Immich Mobile App 1.74.0 build.97 ### Platform with the issue - [ ] Server - [X] Web - [ ] Mobile ### Your docker-compose.yml content ```YAML version: "3.8" 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 env_file: - .env depends_on: - redis - database - typesense restart: always immich-microservices: container_name: immich_microservices image: ghcr.io/immich-app/immich-server:${IMMICH_VERSION:-release} command: [ "start.sh", "microservices" ] volumes: - ${UPLOAD_LOCATION}:/usr/src/app/upload env_file: - .env depends_on: - redis - database - typesense restart: always immich-web: container_name: immich_web image: ghcr.io/immich-app/immich-web:${IMMICH_VERSION:-release} env_file: - .env restart: always typesense: container_name: immich_typesense image: typesense/typesense:0.24.0 environment: - TYPESENSE_API_KEY=${TYPESENSE_API_KEY} - TYPESENSE_DATA_DIR=/data logging: driver: none volumes: - tsdata:/data restart: always redis: container_name: immich_redis image: redis:6.2 restart: always database: container_name: immich_postgres image: postgres:14 env_file: - .env environment: POSTGRES_PASSWORD: ${DB_PASSWORD} POSTGRES_USER: ${DB_USERNAME} POSTGRES_DB: ${DB_DATABASE_NAME} PG_DATA: /var/lib/postgresql/data volumes: - pgdata:/var/lib/postgresql/data restart: always immich-proxy: container_name: immich_proxy image: ghcr.io/immich-app/immich-proxy:${IMMICH_VERSION:-release} environment: # Make sure these values get passed through from the env file - IMMICH_SERVER_URL - IMMICH_WEB_URL ports: - 2283:8080 depends_on: - immich-server restart: always volumes: pgdata: model-cache: tsdata: ``` ### Your .env content ```Shell ################################################################################### # Database ################################################################################### # NOTE: The following four database variables support Docker secrets by adding a *_FILE suffix to the variable name # See the docker-compose documentation on secrets for additional details: https://docs.docker.com/compose/compose-file/compose-file-v3/#secrets DB_HOSTNAME=postgres DB_USERNAME=postgres DB_PASSWORD=hidden DB_DATABASE_NAME=immich # Optional Database settings: # DB_PORT=5432 ################################################################################### # Redis ################################################################################### REDIS_HOSTNAME=immich_redis # REDIS_URL will be used to pass custom options to ioredis. # Example for Sentinel # {"sentinels":[{"host":"redis-sentinel-node-0","port":26379},{"host":"redis-sentinel-node-1","port":26379},{"host":"redis-sentinel-node-2","port":26379}],"name":"redis-sentinel"} # REDIS_URL=ioredis://eyJzZW50aW5lbHMiOlt7Imhvc3QiOiJyZWRpcy1zZW50aW5lbDEiLCJwb3J0IjoyNjM3OX0seyJob3N0IjoicmVkaXMtc2VudGluZWwyIiwicG9ydCI6MjYzNzl9XSwibmFtZSI6Im15bWFzdGVyIn0= # Optional Redis settings: # Note: these parameters are not automatically passed to the Redis Container # to do so, please edit the docker-compose.yml file as well. Redis is not configured # via environment variables, only redis.conf or the command line # REDIS_PORT=6379 # REDIS_DBINDEX=0 # REDIS_USERNAME= # REDIS_PASSWORD= # REDIS_SOCKET= ################################################################################### # Upload File Location # # This is the location where uploaded files are stored. ################################################################################### UPLOAD_LOCATION=/home/foo/immich-photos ################################################################################### # Typesense ################################################################################### TYPESENSE_API_KEY=sufpe2-vokfir-zockAx TYPESENSE_ENABLED=true # TYPESENSE_URL uses base64 encoding for the nodes json. # Example JSON that was used: # [ # { 'host': 'typesense-1.example.net', 'port': '443', 'protocol': 'https' }, # { 'host': 'typesense-2.example.net', 'port': '443', 'protocol': 'https' }, # { 'host': 'typesense-3.example.net', 'port': '443', 'protocol': 'https' }, # ] # TYPESENSE_URL=ha://WwogICAgeyAnaG9zdCc6ICd0eXBlc2Vuc2UtMS5leGFtcGxlLm5ldCcsICdwb3J0JzogJzQ0MycsICdwcm90b2NvbCc6ICdodHRwcycgfSwKICAgIHsgJ2hvc3QnOiAndHlwZXNlbnNlLTIuZXhhbXBsZS5uZXQnLCAncG9ydCc6ICc0NDMnLCAncHJvdG9jb2wnOiAnaHR0cHMnIH0sCiAgICB7ICdob3N0JzogJ3R5cGVzZW5zZS0zLmV4YW1wbGUubmV0JywgJ3BvcnQnOiAnNDQzJywgJ3Byb3RvY29sJzogJ2h0dHBzJyB9LApd ################################################################################### # Reverse Geocoding # # Reverse geocoding is done locally which has a small impact on memory usage # This memory usage can be altered by changing the REVERSE_GEOCODING_PRECISION variable # This ranges from 0-3 with 3 being the most precise # 3 - Cities > 500 population: ~200MB RAM # 2 - Cities > 1000 population: ~150MB RAM # 1 - Cities > 5000 population: ~80MB RAM # 0 - Cities > 15000 population: ~40MB RAM #################################################################################### # DISABLE_REVERSE_GEOCODING=false # REVERSE_GEOCODING_PRECISION=3 #################################################################################### # WEB - Optional # # Custom message on the login page, should be written in HTML form. # For example: # PUBLIC_LOGIN_PAGE_MESSAGE="This is a demo instance of Immich.<br><br>Email: <i>demo@demo.de</i><br>Password: <i>demo</i>" #################################################################################### PUBLIC_LOGIN_PAGE_MESSAGE= #################################################################################### # Alternative Service Addresses - Optional # # This is an advanced feature for users who may be running their immich services on different hosts. # It will not change which address or port that services bind to within their containers, but it will change where other services look for their peers. # Note: immich-microservices is bound to 3002, but no references are made #################################################################################### IMMICH_WEB_URL=http://immich-web:3000 IMMICH_SERVER_URL=http://immich-server:3001 IMMICH_MACHINE_LEARNING_URL=http://192.168.178.38:3003 #IMMICH_MACHINE_LEARNING_URL=true #IMMICH_MACHINE_LEARNING_URL=http://immich-machine-learning:3003 #IMMICH_MACHINE_LEARNING_URL=false #################################################################################### # Alternative API's External Address - Optional # # This is an advanced feature used to control the public server endpoint returned to clients during Well-known discovery. # You should only use this if you want mobile apps to access the immich API over a custom URL. Do not include trailing slash. # NOTE: At this time, the web app will not be affected by this setting and will continue to use the relative path: /api # Examples: http://localhost:3001, http://immich-api.example.com, etc #################################################################################### #IMMICH_API_URL_EXTERNAL=http://localhost:3001 ################################################################################### # Immich Version - Optional # # This allows all immich docker images to be pinned to a specific version. By default, # the version is "release" but could be a specific version, like "v1.59.0". ################################################################################### #IMMICH_VERSION= ``` ### Reproduction steps ```bash 1. View an album on mobile (Android 10, Chrome 116.0.5845.114). 2. Attempt to scroll on the white space left and right of the main photo stream. 3. Scrolling is not registered. Instead, Chrome triggers a reload event. ``` ### Additional information _No response_
OVERLORD added the 🖥️web label 2026-02-05 01:09:44 +03:00
OVERLORD commented 2026-02-05 01:09:48 +03:00
Author
Owner
Copy Link

@brianjaustin commented on GitHub (Nov 5, 2023):

I thought this might be a good issue to flex my frontend skills (full disclosure, it's been awhile); I've done some poking at it, but I haven't been able to get something working that doesn't have drawbacks. I've written up a little bit about each below, in case someone else wants to pick this up (or if someone has ideas to push in the right direction 🙂 ).

<main> Height

Changing <main> on the album page from h-screen to h-full 5156d76194/web/src/routes/(user)/albums/%5BalbumId%5D/%2Bpage.svelte#L420 results in being able to scroll the page from either side. However,
The timeline scrollbar disappears from the DOM, to be replaced by the default scrollbar. I tried a few different ways to make it (the default scrollbar) go away, but none worked for me in Firefox or Chromium
The header becomes outlined in a lighter color when content is underneath it.

Screenshot

Immich UI with photo grid underneath the top menu. The top menu is highlighted with a grey border. Additionally, the custom scrollbar is hidden.

Diff 
diff --git a/web/src/routes/(user)/albums/[albumId]/+page.svelte b/web/src/routes/(user)/albums/[albumId]/+page.svelte
index 2c037f8d..6994a763 100644
--- a/web/src/routes/(user)/albums/[albumId]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId]/+page.svelte
@@ -418,7 +418,7 @@
 </header>
 
 <main
-  class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg sm:px-12 md:px-24 lg:px-40"
+  class="relative h-full overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg sm:px-12 md:px-24 lg:px-40"
 >
   {#if viewMode === ViewMode.SELECT_ASSETS}
 	<AssetGrid assetStore={timelineStore} assetInteractionStore={timelineInteractionStore} isSelectionMode={true} />

Margins Within Asset Grid

Pulling the sm:px-12 md:px-24 lg:px-40 from <main> 5156d76194/web/src/routes/(user)/albums/%5BalbumId%5D/%2Bpage.svelte#L420 into AssetGrid 5156d76194/web/src/lib/components/photos-page/asset-grid.svelte (L328) does make some of the empty space on the album page scrollable. This isn’t free from drawbacks either though:

  1. It changes how the grid appears other places, like the user’s photos page, where it’s not desirable to have gaps around the side. (This could probably be passed in as a property from only pages where it makes sense.)
  2. The spacing now appears uneven and in need of more tweaking.
  3. There’s still part of the screen on either side (more noticeable on the right) where scrolling doesn’t work due to the margins.
Screenshot

Immich UI with album image grid off centre

Diff ```diff diff --git a/web/src/lib/components/photos-page/asset-grid.svelte b/web/src/lib/components/photos-page/asset-grid.svelte index 4fab2662..226d06a1 100644 --- a/web/src/lib/components/photos-page/asset-grid.svelte +++ b/web/src/lib/components/photos-page/asset-grid.svelte @@ -327,7 +327,7 @@
{#if viewMode === ViewMode.SELECT_ASSETS} ```

Make the Grid Full Screen

This suffers from the same margin problem as the second attempt, and doesn’t really make a difference on mobile – at least not on an iPhone XR. It does make the experience a bit better on a desktop though, and personally I like more screen real estate being used for content versus empty space.

Screenshot

Immich album UI with photo grid taking up most of the screen horizontally

Diff ```diff diff --git a/web/src/routes/(user)/albums/[albumId]/+page.svelte b/web/src/routes/(user)/albums/[albumId]/+page.svelte index 2c037f8d..b64eb80e 100644 --- a/web/src/routes/(user)/albums/[albumId]/+page.svelte +++ b/web/src/routes/(user)/albums/[albumId]/+page.svelte @@ -418,7 +418,7 @@ {#if viewMode === ViewMode.SELECT_ASSETS} ```

Other Observations

Again on an iPhone XR, the album view needed to be zoomed out. When I did that, I found myself wondering if the issue is that the Immich scrollbar wasn’t draggable. Maybe changing the on:mouse* events there to on:pointer* would help? I ran into issues testing that though, so I can’t say 100%.

Diff 
diff --git a/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte b/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte
index da028f68..333d19fc 100644
--- a/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte
+++ b/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte
@@ -65,15 +65,15 @@
 	style:height={height + 'px'}
 	style:background-color={isDragging ? 'transparent' : 'transparent'}
 	draggable="false"
-	on:mouseenter={() => (isHover = true)}
-	on:mouseleave={() => {
+	on:pointerenter={() => (isHover = true)}
+	on:pointerleave={() => {
   	isHover = false;
   	isDragging = false;
 	}}
-	on:mouseenter={({ clientY, buttons }) => handleMouseEvent({ clientY, isDragging: !!buttons })}
+	on:pointerenter={({ clientY, buttons }) => handleMouseEvent({ clientY, isDragging: !!buttons })}
 	on:mousemove={({ clientY }) => handleMouseEvent({ clientY })}
-	on:mousedown={({ clientY }) => handleMouseEvent({ clientY, isDragging: true })}
-	on:mouseup={({ clientY }) => handleMouseEvent({ clientY, isDragging: false })}
+	on:pointerdown={({ clientY }) => handleMouseEvent({ clientY, isDragging: true })}
+	on:pointerup={({ clientY }) => handleMouseEvent({ clientY, isDragging: false })}
   >
 	{#if isHover}
   	<div
@brianjaustin commented on GitHub (Nov 5, 2023): I thought this might be a good issue to flex my frontend skills (full disclosure, it's been awhile); I've done some poking at it, but I haven't been able to get something working that doesn't have drawbacks. I've written up a little bit about each below, in case someone else wants to pick this up (or if someone has ideas to push in the right direction :slightly_smiling_face: ). ## `<main>` Height Changing `<main>` on the album page from `h-screen` to `h-full` https://github.com/immich-app/immich/blob/5156d761940df1ae2a7b99a4dba190e03f8d3cb7/web/src/routes/(user)/albums/%5BalbumId%5D/%2Bpage.svelte#L420 results in being able to scroll the page from either side. However, The timeline scrollbar disappears from the DOM, to be replaced by the default scrollbar. I tried a few different ways to make it (the default scrollbar) go away, but none worked for me in Firefox or Chromium The header becomes outlined in a lighter color when content is underneath it. <details> <summary>Screenshot</summary> ![Immich UI with photo grid underneath the top menu. The top menu is highlighted with a grey border. Additionally, the custom scrollbar is hidden.](https://github.com/immich-app/immich/assets/13002992/b91bb1dc-269c-4cc0-bce5-a28b7a46c416) </details> <details> <summary>Diff</summary> ```diff diff --git a/web/src/routes/(user)/albums/[albumId]/+page.svelte b/web/src/routes/(user)/albums/[albumId]/+page.svelte index 2c037f8d..6994a763 100644 --- a/web/src/routes/(user)/albums/[albumId]/+page.svelte +++ b/web/src/routes/(user)/albums/[albumId]/+page.svelte @@ -418,7 +418,7 @@ </header> <main - class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg sm:px-12 md:px-24 lg:px-40" + class="relative h-full overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg sm:px-12 md:px-24 lg:px-40" > {#if viewMode === ViewMode.SELECT_ASSETS} <AssetGrid assetStore={timelineStore} assetInteractionStore={timelineInteractionStore} isSelectionMode={true} /> ``` </details> ## Margins Within Asset Grid Pulling the `sm:px-12 md:px-24 lg:px-40` from `<main>` https://github.com/immich-app/immich/blob/5156d761940df1ae2a7b99a4dba190e03f8d3cb7/web/src/routes/(user)/albums/%5BalbumId%5D/%2Bpage.svelte#L420 into AssetGrid https://github.com/immich-app/immich/blob/5156d761940df1ae2a7b99a4dba190e03f8d3cb7/web/src/lib/components/photos-page/asset-grid.svelte#L328 does make some of the empty space on the album page scrollable. This isn’t free from drawbacks either though: 1. It changes how the grid appears other places, like the user’s photos page, where it’s not desirable to have gaps around the side. (This could probably be passed in as a property from only pages where it makes sense.) 1. The spacing now appears uneven and in need of more tweaking. 1. There’s still part of the screen on either side (more noticeable on the right) where scrolling doesn’t work due to the margins. <details> <summary>Screenshot</summary> ![Immich UI with album image grid off centre](https://github.com/immich-app/immich/assets/13002992/15bad25c-225a-45b0-be97-a1f0aa13457f) </details> <details> <summary>Diff</summary> ```diff diff --git a/web/src/lib/components/photos-page/asset-grid.svelte b/web/src/lib/components/photos-page/asset-grid.svelte index 4fab2662..226d06a1 100644 --- a/web/src/lib/components/photos-page/asset-grid.svelte +++ b/web/src/lib/components/photos-page/asset-grid.svelte @@ -327,7 +327,7 @@ <!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar --> <section id="asset-grid" - class="scrollbar-hidden h-full overflow-y-auto pb-[60px] {isEmpty ? 'm-0' : 'ml-4 mr-[60px]'}" + class="scrollbar-hidden h-full overflow-y-auto pb-[60px] {isEmpty ? 'm-0' : 'ml-4 mr-[60px]'} sm:px-12 md:px-24 lg:px-40" bind:clientHeight={viewport.height} bind:clientWidth={viewport.width} bind:this={element} diff --git a/web/src/routes/(user)/albums/[albumId]/+page.svelte b/web/src/routes/(user)/albums/[albumId]/+page.svelte index 2c037f8d..b64eb80e 100644 --- a/web/src/routes/(user)/albums/[albumId]/+page.svelte +++ b/web/src/routes/(user)/albums/[albumId]/+page.svelte @@ -418,7 +418,7 @@ </header> <main - class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg sm:px-12 md:px-24 lg:px-40" + class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg" > {#if viewMode === ViewMode.SELECT_ASSETS} <AssetGrid assetStore={timelineStore} assetInteractionStore={timelineInteractionStore} isSelectionMode={true} /> ``` </details> ## Make the Grid Full Screen This suffers from the same margin problem as the second attempt, and doesn’t really make a difference on mobile – at least not on an iPhone XR. It does make the experience a bit better on a desktop though, and personally I like more screen real estate being used for content versus empty space. <details> <summary>Screenshot</summary> ![Immich album UI with photo grid taking up most of the screen horizontally](https://github.com/immich-app/immich/assets/13002992/0974cc1b-acbd-4b51-85ea-2fe96763847a) </details> <details> <summary>Diff</summary> ```diff diff --git a/web/src/routes/(user)/albums/[albumId]/+page.svelte b/web/src/routes/(user)/albums/[albumId]/+page.svelte index 2c037f8d..b64eb80e 100644 --- a/web/src/routes/(user)/albums/[albumId]/+page.svelte +++ b/web/src/routes/(user)/albums/[albumId]/+page.svelte @@ -418,7 +418,7 @@ </header> <main - class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg sm:px-12 md:px-24 lg:px-40" + class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg" > {#if viewMode === ViewMode.SELECT_ASSETS} <AssetGrid assetStore={timelineStore} assetInteractionStore={timelineInteractionStore} isSelectionMode={true} /> ``` </details> ## Other Observations Again on an iPhone XR, the album view needed to be zoomed out. When I did that, I found myself wondering if the issue is that the Immich scrollbar wasn’t draggable. Maybe changing the `on:mouse*` events there to `on:pointer*` would help? I ran into issues testing that though, so I can’t say 100%. <details> <summary>Diff</summary> ```diff diff --git a/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte b/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte index da028f68..333d19fc 100644 --- a/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte +++ b/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte @@ -65,15 +65,15 @@ style:height={height + 'px'} style:background-color={isDragging ? 'transparent' : 'transparent'} draggable="false" - on:mouseenter={() => (isHover = true)} - on:mouseleave={() => { + on:pointerenter={() => (isHover = true)} + on:pointerleave={() => { isHover = false; isDragging = false; }} - on:mouseenter={({ clientY, buttons }) => handleMouseEvent({ clientY, isDragging: !!buttons })} + on:pointerenter={({ clientY, buttons }) => handleMouseEvent({ clientY, isDragging: !!buttons })} on:mousemove={({ clientY }) => handleMouseEvent({ clientY })} - on:mousedown={({ clientY }) => handleMouseEvent({ clientY, isDragging: true })} - on:mouseup={({ clientY }) => handleMouseEvent({ clientY, isDragging: false })} + on:pointerdown={({ clientY }) => handleMouseEvent({ clientY, isDragging: true })} + on:pointerup={({ clientY }) => handleMouseEvent({ clientY, isDragging: false })} > {#if isHover} <div ``` </details>
OVERLORD commented 2026-02-05 01:09:53 +03:00
Author
Owner
Copy Link

@ChokunPlayZ commented on GitHub (Dec 23, 2023):

since this never got fixed, I don't know if it slipped past the devs but I made a quick workaround using CSS.
just drop this into the custom CSS in the theme settings, clear your cache and it should fix this issue.
there's other stuff in the file too, you can remove things you don't want, the fix for this exact problem itself is just a 4 line CSS.
https://gist.github.com/ChokunPlayZ/eec78effcc0d02b98be9e2fd7d70e925

@ChokunPlayZ commented on GitHub (Dec 23, 2023): since this never got fixed, I don't know if it slipped past the devs but I made a quick workaround using CSS. just drop this into the custom CSS in the theme settings, clear your cache and it should fix this issue. there's other stuff in the file too, you can remove things you don't want, the fix for this exact problem itself is just a 4 line CSS. https://gist.github.com/ChokunPlayZ/eec78effcc0d02b98be9e2fd7d70e925
OVERLORD commented 2026-02-05 01:09:56 +03:00
Author
Owner
Copy Link

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

I believe this is fixed as we don't ever use the asset grid with a margin, like we used to have in the album page.

@jrasm91 commented on GitHub (Sep 4, 2024): I believe this is fixed as we don't ever use the asset grid with a margin, like we used to have in the album page.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
accessibility
changelog:enhancement
changelog:security
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 🖥️web
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#1280
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?