From 147c6e3600b6893c4ed6d1ee6f905a91e5bd1242 Mon Sep 17 00:00:00 2001
From: ayykamp <32194363+ayykamp@users.noreply.github.com>
Date: Fri, 26 Jul 2024 23:06:08 +0200
Subject: [PATCH] chore(web): improve responsiveness in Album and Shared Album
 pages on small devices (#11055)

* style: better responsiveness on album and shared album pages

* revert right margin changes

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
---
 web/src/lib/components/album-page/album-title.svelte          | 2 +-
 web/src/lib/components/album-page/album-viewer.svelte         | 4 ++--
 web/src/lib/components/photos-page/asset-grid.svelte          | 4 +++-
 .../[[photos=photos]]/[[assetId=id]]/+page.svelte             | 2 +-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/src/lib/components/album-page/album-title.svelte b/web/src/lib/components/album-page/album-title.svelte
index 44b3e3d1ea6..22c26aa10c5 100644
--- a/web/src/lib/components/album-page/album-title.svelte
+++ b/web/src/lib/components/album-page/album-title.svelte
@@ -33,7 +33,7 @@
 <input
   use:shortcut={{ shortcut: { key: 'Enter' }, onShortcut: (e) => e.currentTarget.blur() }}
   on:blur={handleUpdateName}
-  class="w-[99%] mb-2 border-b-2 border-transparent text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary {isOwned
+  class="w-[99%] mb-2 border-b-2 border-transparent text-2xl md:text-4xl lg:text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary {isOwned
     ? 'hover:border-gray-400'
     : 'hover:border-transparent'} bg-immich-bg focus:border-b-2 focus:border-immich-primary focus:outline-none dark:bg-immich-dark-bg dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray"
   type="text"
diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte
index fe3a0a4f74c..7a88aa740b6 100644
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -95,10 +95,10 @@
 
 <main class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg">
   <AssetGrid {album} {assetStore} {assetInteractionStore}>
-    <section class="pt-24">
+    <section class="pt-8 md:pt-24">
       <!-- ALBUM TITLE -->
       <h1
-        class="bg-immich-bg text-6xl text-immich-primary outline-none transition-all dark:bg-immich-dark-bg dark:text-immich-dark-primary"
+        class="bg-immich-bg text-2xl md:text-4xl lg:text-6xl text-immich-primary outline-none transition-all dark:bg-immich-dark-bg dark:text-immich-dark-primary"
       >
         {album.albumName}
       </h1>
diff --git a/web/src/lib/components/photos-page/asset-grid.svelte b/web/src/lib/components/photos-page/asset-grid.svelte
index 7f56192ce78..b129d7dc086 100644
--- a/web/src/lib/components/photos-page/asset-grid.svelte
+++ b/web/src/lib/components/photos-page/asset-grid.svelte
@@ -427,7 +427,9 @@
 <!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar -->
 <section
   id="asset-grid"
-  class="scrollbar-hidden h-full overflow-y-auto outline-none pb-[60px] {isEmpty ? 'm-0' : 'ml-4 tall:ml-0 mr-[60px]'}"
+  class="scrollbar-hidden h-full overflow-y-auto outline-none pb-[60px] {isEmpty
+    ? 'm-0'
+    : 'ml-4 tall:ml-0 md:mr-[60px]'}"
   tabindex="-1"
   bind:clientHeight={viewport.height}
   bind:clientWidth={viewport.width}
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index d44cf15fcf6..089588e6ea4 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -548,7 +548,7 @@
           >
             {#if viewMode !== ViewMode.SELECT_THUMBNAIL}
               <!-- ALBUM TITLE -->
-              <section class="pt-24">
+              <section class="pt-8 md:pt-24">
                 <AlbumTitle id={album.id} bind:albumName={album.albumName} {isOwned} />
 
                 {#if album.assetCount > 0}