fix(web): scrollbar offset (#4518)

* fix(web): scrollbar offset

* fix offset on photo page

* proper fix

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/lib/components/layouts/user-page-layout.svelte

@@ -13,6 +13,7 @@
   export let admin = false;
 
   $: scrollbarClass = scrollbar ? 'immich-scrollbar p-4 pb-8' : 'scrollbar-hidden pl-4';
+  $: hasTitleClass = title ? 'top-16 h-[calc(100%-theme(spacing.16))]' : 'top-0 h-full';
 </script>
 
 <header>
@@ -32,20 +33,19 @@
       <SideBar />
     {/if}
   </slot>
-  <slot name="content">
+
-    {#if title}
   <section class="relative">
+    {#if title}
       <div
         class="absolute flex h-16 w-full place-items-center justify-between border-b p-4 dark:border-immich-dark-gray dark:text-immich-dark-fg"
       >
         <p class="font-medium">{title}</p>
         <slot name="buttons" />
       </div>
+    {/if}
 
-        <div class="{scrollbarClass} absolute top-16 h-[calc(100%-theme(spacing.16))] w-full overflow-y-auto">
+    <div class="{scrollbarClass} absolute {hasTitleClass} w-full overflow-y-auto">
       <slot />
     </div>
   </section>
-    {/if}
-  </slot>
 </main>

web/src/lib/components/photos-page/asset-grid.svelte

@@ -25,6 +25,7 @@
   export let assetStore: AssetStore;
   export let assetInteractionStore: AssetInteractionStore;
   export let removeAction: AssetAction | null = null;
+
   $: isTrashEnabled = $featureFlags.loaded && $featureFlags.trash;
   export let forceDelete = false;
 

web/src/routes/(user)/archive/+page.svelte

@@ -45,7 +45,7 @@
   </AssetSelectControlBar>
 {/if}
 
-<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title}>
+<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
   <AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.UNARCHIVE}>
     <EmptyPlaceholder
       text="Archive photos and videos to hide them from your Photos view"

web/src/routes/(user)/favorites/+page.svelte

@@ -46,7 +46,7 @@
   </AssetSelectControlBar>
 {/if}
 
-<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title}>
+<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
   <AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.UNFAVORITE}>
     <EmptyPlaceholder
       text="Add favorites to quickly find your best pictures and videos"

web/src/routes/(user)/photos/+page.svelte

@@ -48,9 +48,7 @@
   };
 </script>
 
-<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} showUploadButton>
+{#if $isMultiSelectState}
-  <svelte:fragment slot="header">
-    {#if $isMultiSelectState}
   <AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
     <CreateSharedLink on:escape={() => (handleEscapeKey = true)} />
     <SelectAllAssets {assetStore} {assetInteractionStore} />
@@ -69,9 +67,9 @@
       <AssetJobActions />
     </AssetSelectContextMenu>
   </AssetSelectControlBar>
-    {/if}
+{/if}
-  </svelte:fragment>
+
-  <svelte:fragment slot="content">
+<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} showUploadButton scrollbar={false}>
   <AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.ARCHIVE} on:escape={handleEscape}>
     {#if data.user.memoriesEnabled}
       <MemoryLane />
@@ -82,5 +80,4 @@
       slot="empty"
     />
   </AssetGrid>
-  </svelte:fragment>
 </UserPageLayout>

web/src/routes/(user)/trash/+page.svelte

@@ -70,7 +70,7 @@
 {/if}
 
 {#if $featureFlags.loaded && $featureFlags.trash}
-  <UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title}>
+  <UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
     <div class="flex place-items-center gap-2" slot="buttons">
       <LinkButton on:click={handleRestoreTrash}>
         <div class="flex place-items-center gap-2 text-sm">
@@ -87,7 +87,7 @@
     </div>
 
     <AssetGrid forceDelete {assetStore} {assetInteractionStore}>
-      <p class="font-medium text-gray-500/60 dark:text-gray-300/60">
+      <p class="font-medium text-gray-500/60 dark:text-gray-300/60 py-4">
         Trashed items will be permanently deleted after {$serverConfig.trashDays} days.
       </p>
       <EmptyPlaceholder