From 02301bf15e1b0a815ce2fb29f56b2e01ff6b8a52 Mon Sep 17 00:00:00 2001
From: MrVauxs <mrvauxs@gmail.com>
Date: Thu, 21 Dec 2023 03:04:06 +0100
Subject: [PATCH] dynamic header height calculation

---
 src/lib/components/ItemList.svelte | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/ItemList.svelte b/src/lib/components/ItemList.svelte
index cbabd2f..ad69d60 100644
--- a/src/lib/components/ItemList.svelte
+++ b/src/lib/components/ItemList.svelte
@@ -79,12 +79,14 @@
 			next?.scrollIntoView({ block: 'center' });
 		}
 	}
+
+	let headerHeight = 0;
 </script>
 
 <svelte:window on:keydown={move} />
 
-<div class="card flex flex-col">
-	<div class="sticky top-0 h-14">
+<div class="card flex flex-col" style="--headerHeight: {headerHeight}px">
+	<div class="sticky top-0" bind:clientHeight={headerHeight}>
 		<div>
 			<div class="input-group input-group-divider flex flex-row rounded-b-none">
 				<div class="input-group-shim !p-0">
@@ -114,7 +116,7 @@
 		</div>
 	</div>
 	<div
-		class="h-[calc(var(--slotHeight)_-_3.625rem)] overflow-y-scroll offset-scroll scroll-thin
+		class="h-[calc(var(--slotHeight)_-_var(--headerHeight))] overflow-y-scroll offset-scroll scroll-thin
 		[&_button:nth-child(odd)]:bg-surface-200/50 dark:[&_button:nth-child(odd)]:bg-surface-700/50"
 	>
 		{#each filteredItems as item}