diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte index a45274bc1c..722cfadc92 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 c78edaa601..6f39536ef0 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' }`} >