use media query for grid padding/margin size

immich-app · Mar 20, 2024 · e2bc3ce · e2bc3ce
1 parent 2dcce03
commit e2bc3ce
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -30,6 +30,9 @@ module.exports = {
       spacing: {
         18: '4.5rem',
       },
+      screens: {
+        tall: { raw: '(min-height: 800px)' },
+      },
     },
   },
 };