From 22edfda1059008a373f214693ba1dd03789b5022 Mon Sep 17 00:00:00 2001
From: Min Idzelis <min123@gmail.com>
Date: Tue, 25 Mar 2025 00:28:12 +0000
Subject: [PATCH] fix: shrink memory lane, glitchy scrub, bad intersection

---
 .../lib/components/photos-page/memory-lane.svelte    |  4 ++--
 .../shared-components/scrubber/scrubber.svelte       |  3 ++-
 web/src/lib/stores/assets-store.svelte.ts            | 12 ++----------
 3 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/web/src/lib/components/photos-page/memory-lane.svelte b/web/src/lib/components/photos-page/memory-lane.svelte
index 9536aaf746..1bca4e7640 100644
--- a/web/src/lib/components/photos-page/memory-lane.svelte
+++ b/web/src/lib/components/photos-page/memory-lane.svelte
@@ -76,7 +76,7 @@
     <div class="inline-block" use:resizeObserver={({ width }) => (innerWidth = width)}>
       {#each memoryStore.memories as memory (memory.id)}
         <a
-          class="memory-card relative mr-8 last:mr-0 inline-block aspect-[3/4] md:aspect-[4/3] xl:aspect-video h-[215px] rounded-xl"
+          class="memory-card relative mr-8 last:mr-0 inline-block aspect-[3/4] md:aspect-[4/3] max-md:h-[150px] xl:aspect-video h-[215px] rounded-xl"
           href="{AppRoute.MEMORY}?{QueryParameter.ID}={memory.assets[0].id}"
         >
           <img
@@ -85,7 +85,7 @@
             alt={$t('memory_lane_title', { values: { title: $getAltText(memory.assets[0]) } })}
             draggable="false"
           />
-          <p class="absolute bottom-2 left-4 z-10 text-lg text-white">
+          <p class="absolute bottom-2 left-4 z-10 text-lg text-white max-md:text-sm">
             {$memoryLaneTitle(memory)}
           </p>
           <div
diff --git a/web/src/lib/components/shared-components/scrubber/scrubber.svelte b/web/src/lib/components/shared-components/scrubber/scrubber.svelte
index 734b42205e..cbc70ae01b 100644
--- a/web/src/lib/components/shared-components/scrubber/scrubber.svelte
+++ b/web/src/lib/components/shared-components/scrubber/scrubber.svelte
@@ -269,6 +269,7 @@
     };
   });
   const usingMobileDevice = $derived(mobileDevice.hoverNone);
+  const width = $derived(isDragging ? '100vw' : usingMobileDevice ? '20px' : '60px');
 </script>
 
 <svelte:window
@@ -293,7 +294,7 @@
   class="absolute right-0 z-[1] select-none bg-immich-bg hover:cursor-row-resize"
   style:padding-top={HOVER_DATE_HEIGHT + 'px'}
   style:padding-bottom={HOVER_DATE_HEIGHT + 'px'}
-  style:width={isDragging ? '100vw' : '60px'}
+  style:width
   style:height={height + 'px'}
   style:background-color={isDragging ? 'transparent' : 'transparent'}
   bind:this={scrollBar}
diff --git a/web/src/lib/stores/assets-store.svelte.ts b/web/src/lib/stores/assets-store.svelte.ts
index cd86e60fc5..b15f98cf66 100644
--- a/web/src/lib/stores/assets-store.svelte.ts
+++ b/web/src/lib/stores/assets-store.svelte.ts
@@ -76,7 +76,7 @@ class IntersectingAsset {
     }
 
     const store = this.#group.bucket.store;
-    const topWindow = store.visibleWindow.top + HEADER - INTERSECTION_EXPAND_TOP;
+    const topWindow = store.visibleWindow.top - HEADER - INTERSECTION_EXPAND_TOP;
     const bottomWindow = store.visibleWindow.bottom + HEADER + INTERSECTION_EXPAND_BOTTOM;
     const positionTop = this.#group.absoluteDateGroupTop + this.position.top;
     const positionBottom = positionTop + this.position.height;
@@ -439,15 +439,7 @@ export class AssetBucket {
       }
     }
     this.#bucketHeight = height;
-    if (store.topIntersectingBucket) {
-      const currentIndex = store.buckets.indexOf(store.topIntersectingBucket);
-      // if the bucket is 'before' the last intersecting bucket in the sliding window
-      // then adjust the scroll position by the delta, to compensate for the bucket
-      // size adjustment
-      if (currentIndex > 0 && index <= currentIndex) {
-        store.compensateScrollCallback?.(bucketHeightDelta);
-      }
-    }
+    store.updateIntersections();
   }
   get bucketHeight() {
     return this.#bucketHeight;