From b13a98646f1349379acc1021d803356a303f6cfc Mon Sep 17 00:00:00 2001
From: Lukas <lukas@slucky.de>
Date: Wed, 19 Feb 2025 00:40:52 +0100
Subject: [PATCH] fix(web): improve memories layout on small screens (#16162)

* fix(web): improve memories layout on small screens

* decrease viewer height
---
 web/src/lib/components/memory-page/memory-viewer.svelte     | 6 +++---
 .../lib/components/shared-components/control-app-bar.svelte | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte
index a45274bc1c1..722cfadc924 100644
--- a/web/src/lib/components/memory-page/memory-viewer.svelte
+++ b/web/src/lib/components/memory-page/memory-viewer.svelte
@@ -264,7 +264,7 @@
 
 <section id="memory-viewer" class="w-full bg-immich-dark-gray" bind:this={memoryWrapper}>
   {#if current && current.memory.assets.length > 0}
-    <ControlAppBar onClose={() => goto(AppRoute.PHOTOS)} forceDark>
+    <ControlAppBar onClose={() => goto(AppRoute.PHOTOS)} forceDark multiRow>
       {#snippet leading()}
         {#if current}
           <p class="text-lg">
@@ -320,9 +320,9 @@
       </div>
     {/if}
     <!-- Viewer -->
-    <section class="overflow-hidden pt-20">
+    <section class="overflow-hidden pt-32 md:pt-20">
       <div
-        class="ml-[-100%] box-border flex h-[calc(100vh_-_180px)] w-[300%] items-center justify-center gap-10 overflow-hidden"
+        class="ml-[-100%] box-border flex h-[calc(100vh_-_224px)] md:h-[calc(100vh_-_180px)] w-[300%] items-center justify-center gap-10 overflow-hidden"
       >
         <!-- PREVIOUS MEMORY -->
         <div class="h-1/2 w-[20vw] rounded-2xl {current.previousMemory ? 'opacity-25 hover:opacity-70' : 'opacity-0'}">
diff --git a/web/src/lib/components/shared-components/control-app-bar.svelte b/web/src/lib/components/shared-components/control-app-bar.svelte
index c78edaa6010..6f39536ef0d 100644
--- a/web/src/lib/components/shared-components/control-app-bar.svelte
+++ b/web/src/lib/components/shared-components/control-app-bar.svelte
@@ -13,6 +13,7 @@
     backIcon?: string;
     tailwindClasses?: string;
     forceDark?: boolean;
+    multiRow?: boolean;
     onClose?: () => void;
     leading?: Snippet;
     children?: Snippet;
@@ -24,6 +25,7 @@
     backIcon = mdiClose,
     tailwindClasses = '',
     forceDark = false,
+    multiRow = false,
     onClose = () => {},
     leading,
     children,
@@ -67,7 +69,7 @@
 <div in:fly={{ y: 10, duration: 200 }} class="absolute top-0 w-full z-[100] bg-transparent">
   <div
     id="asset-selection-app-bar"
-    class={`grid grid-cols-[10%_80%_10%] justify-between sm:grid-cols-[25%_50%_25%] lg:grid-cols-[25%_50%_25%]  ${appBarBorder} mx-2 mt-2 place-items-center rounded-lg p-2 transition-all ${tailwindClasses} dark:bg-immich-dark-gray ${
+    class={`grid ${multiRow ? 'grid-cols-[100%] md:grid-cols-[25%_50%_25%]' : 'grid-cols-[10%_80%_10%] sm:grid-cols-[25%_50%_25%]'} justify-between lg:grid-cols-[25%_50%_25%] ${appBarBorder} mx-2 mt-2 place-items-center rounded-lg p-2 transition-all ${tailwindClasses} dark:bg-immich-dark-gray ${
       forceDark && 'bg-immich-dark-gray text-white'
     }`}
   >