From d257cdcbbfcc7b1b94cfff87bda31caa4193861e Mon Sep 17 00:00:00 2001
From: Sam Holton <samholton@gmail.com>
Date: Sun, 10 Mar 2024 15:32:05 -0400
Subject: [PATCH] feat(web): add sticky date headers for asset-date-group
 (#7824)

* feat(web): add sticky date headers for asset-date-group

* use existing classes
---
 .../lib/components/photos-page/asset-date-group.svelte    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/photos-page/asset-date-group.svelte b/web/src/lib/components/photos-page/asset-date-group.svelte
index 0c40c87108..6f7af44efa 100644
--- a/web/src/lib/components/photos-page/asset-date-group.svelte
+++ b/web/src/lib/components/photos-page/asset-date-group.svelte
@@ -127,7 +127,7 @@
 
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
-      class="mt-5 flex flex-col"
+      class="flex flex-col"
       on:mouseenter={() => {
         isMouseOverGroup = true;
         assetMouseEventHandler(groupTitle, null);
@@ -138,8 +138,8 @@
       }}
     >
       <!-- Date group title -->
-      <p
-        class="mb-2 flex h-6 place-items-center text-xs font-medium text-immich-fg dark:text-immich-dark-fg md:text-sm"
+      <div
+        class="flex z-[100] sticky top-0 pt-7 pb-5 h-6 place-items-center text-xs font-medium text-immich-fg bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg md:text-sm"
         style="width: {geometry[groupIndex].containerWidth}px"
       >
         {#if !singleSelect && ((hoveredDateGroup == groupTitle && isMouseOverGroup) || $selectedGroup.has(groupTitle))}
@@ -160,7 +160,7 @@
         <span class="truncate first-letter:capitalize" title={groupTitle}>
           {groupTitle}
         </span>
-      </p>
+      </div>
 
       <!-- Image grid -->
       <div