fix: container padding (#19316)

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

@@ -35,7 +35,7 @@
     children,
   }: Props = $props();
 
-  let scrollbarClass = $derived(scrollbar ? 'immich-scrollbar p-2' : 'scrollbar-hidden');
+  let scrollbarClass = $derived(scrollbar ? 'immich-scrollbar' : 'scrollbar-hidden');
   let hasTitleClass = $derived(title ? 'top-16 h-[calc(100%-(--spacing(16)))]' : 'top-0 h-full');
 </script>
 
@@ -60,7 +60,7 @@
   {/if}
 
   <main class="relative">
-    <div class="{scrollbarClass} absolute {hasTitleClass} w-full overflow-y-auto" use:useActions={use}>
+    <div class="{scrollbarClass} absolute {hasTitleClass} w-full overflow-y-auto p-2" use:useActions={use}>
       {@render children?.()}
     </div>
 

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -145,19 +145,19 @@
       {#if !singleSelect && ((hoveredDayGroup === dayGroup.groupTitle && isMouseOverGroup) || assetInteraction.selectedGroup.has(dayGroup.groupTitle))}
         <div
           transition:fly={{ x: -24, duration: 200, opacity: 0.5 }}
-          class="inline-block px-2 hover:cursor-pointer"
+          class="inline-block pe-2 hover:cursor-pointer"
           onclick={() => handleSelectGroup(dayGroup.groupTitle, assetsSnapshot(dayGroup.getAssets()))}
           onkeydown={() => handleSelectGroup(dayGroup.groupTitle, assetsSnapshot(dayGroup.getAssets()))}
         >
           {#if assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
-            <Icon path={mdiCheckCircle} size="24" color="#4250af" />
+            <Icon path={mdiCheckCircle} size="24" class="text-primary" />
           {:else}
             <Icon path={mdiCircleOutline} size="24" color="#757575" />
           {/if}
         </div>
       {/if}
 
-      <span class="w-full truncate first-letter:capitalize ms-2.5" title={dayGroup.groupTitle}>
+      <span class="w-full truncate first-letter:capitalize" title={dayGroup.groupTitle}>
         {dayGroup.groupTitle}
       </span>
     </div>

web/src/lib/components/photos-page/memory-lane.svelte

@@ -39,7 +39,7 @@
   <section
     id="memory-lane"
     bind:this={memoryLaneElement}
-    class="relative mt-5 mx-2 overflow-x-scroll overflow-y-hidden whitespace-nowrap transition-all"
+    class="relative mt-3 overflow-x-scroll overflow-y-hidden whitespace-nowrap transition-all"
     style="scrollbar-width:none"
     use:resizeObserver={({ width }) => (offsetWidth = width)}
     onscroll={onScroll}

web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts

@@ -80,15 +80,15 @@ describe('TimelineManager', () => {
 
       expect(plainMonths).toEqual(
         expect.arrayContaining([
-          expect.objectContaining({ year: 2024, month: 3, height: 185.5 }),
+          expect.objectContaining({ year: 2024, month: 3, height: 165.5 }),
-          expect.objectContaining({ year: 2024, month: 2, height: 12_016 }),
+          expect.objectContaining({ year: 2024, month: 2, height: 11_996 }),
           expect.objectContaining({ year: 2024, month: 1, height: 286 }),
         ]),
       );
     });
 
     it('calculates timeline height', () => {
-      expect(timelineManager.timelineHeight).toBe(12_487.5);
+      expect(timelineManager.timelineHeight).toBe(12_447.5);
     });
   });
 

web/src/lib/utils/layout-utils.ts

@@ -96,6 +96,7 @@ export function justifiedLayout(assets: (TimelineAsset | AssetResponseDto)[], op
     containerWidth: options.rowWidth,
     boxSpacing: options.spacing,
     targetRowHeightTolerange: options.heightTolerance,
+    containerPadding: 0,
   };
 
   const result = createJustifiedLayout(

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -443,7 +443,7 @@
 
 <div class="flex overflow-hidden" use:scrollMemoryClearer={{ routeStartsWith: AppRoute.ALBUMS }}>
   <div class="relative w-full shrink">
-    <main class="relative h-dvh overflow-hidden px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
+    <main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
       <AssetGrid
         enableRouting={viewMode === AlbumPageViewMode.SELECT_ASSETS ? false : true}
         {album}

web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -42,8 +42,9 @@
   };
 </script>
 
-<main class="grid h-dvh pt-18">
+<main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
   <AssetGrid enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape} />
+</main>
 
 {#if assetInteraction.selectionActive}
   <AssetSelectControlBar
@@ -66,4 +67,3 @@
     {/snippet}
   </ControlAppBar>
 {/if}
-</main>

web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -374,7 +374,7 @@
 </script>
 
 <main
-  class="relative z-0 h-dvh overflow-hidden tall:ms-4 md:pt-(--navbar-height-md) pt-(--navbar-height)"
+  class="relative z-0 h-dvh overflow-hidden px-2 md:px-6 md:pt-(--navbar-height-md) pt-(--navbar-height)"
   use:scrollMemoryClearer={{
     routeStartsWith: AppRoute.PEOPLE,
     beforeClear: () => {