From 44ed1f091957f061c837767cc1d5dafc36d592e5 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Thu, 21 Mar 2024 00:18:38 -0500
Subject: [PATCH] fix(web): asset-grid padding/margin left fix (#8125)

use media query for grid padding/margin size
---
 web/src/lib/components/photos-page/asset-grid.svelte           | 2 +-
 .../shared-components/navigation-bar/navigation-bar.svelte     | 2 +-
 web/src/routes/(user)/people/[personId]/+page.svelte           | 2 +-
 web/tailwind.config.cjs                                        | 3 +++
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/photos-page/asset-grid.svelte b/web/src/lib/components/photos-page/asset-grid.svelte
index 5892442df3..5416737647 100644
--- a/web/src/lib/components/photos-page/asset-grid.svelte
+++ b/web/src/lib/components/photos-page/asset-grid.svelte
@@ -380,7 +380,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' : 'mr-[60px]'}"
+  class="scrollbar-hidden h-full overflow-y-auto pb-[60px] {isEmpty ? 'm-0' : 'ml-4 tall:ml-0 mr-[60px]'}"
   bind:clientHeight={viewport.height}
   bind:clientWidth={viewport.width}
   bind:this={element}
diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
index 43834c648c..c64d8f64cd 100644
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@@ -50,7 +50,7 @@
       <ImmichLogo width="55%" noText={innerWidth < 768} />
     </a>
     <div class="flex justify-between gap-16 pr-6">
-      <div class="hidden w-full max-w-5xl flex-1 sm:block">
+      <div class="hidden w-full max-w-5xl flex-1 pl-4 tall:pl-0 sm:block">
         {#if $featureFlags.search}
           <SearchBar grayTheme={true} />
         {/if}
diff --git a/web/src/routes/(user)/people/[personId]/+page.svelte b/web/src/routes/(user)/people/[personId]/+page.svelte
index ae99b07622..889e025f9c 100644
--- a/web/src/routes/(user)/people/[personId]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/+page.svelte
@@ -434,7 +434,7 @@
   {/if}
 </header>
 
-<main class="relative h-screen overflow-hidden bg-immich-bg ml-4 pt-[var(--navbar-height)] dark:bg-immich-dark-bg">
+<main class="relative h-screen overflow-hidden bg-immich-bg tall:ml-4 pt-[var(--navbar-height)] dark:bg-immich-dark-bg">
   {#key refreshAssetGrid}
     <AssetGrid
       {assetStore}
diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs
index 8dee52c5d7..3d4176bd7a 100644
--- a/web/tailwind.config.cjs
+++ b/web/tailwind.config.cjs
@@ -30,6 +30,9 @@ module.exports = {
       spacing: {
         18: '4.5rem',
       },
+      screens: {
+        tall: { raw: '(min-height: 800px)' },
+      },
     },
   },
 };