From bd1c80dd3b96ef96e7ac9dcd7529fb7d7b91cc43 Mon Sep 17 00:00:00 2001
From: seriousm4x <maxi@quoss.org>
Date: Tue, 24 Oct 2023 00:19:00 +0200
Subject: [PATCH] fix: line height by using overflow container

---
 frontend/src/lib/components/Navbar.svelte | 62 ++++++++++++-----------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/frontend/src/lib/components/Navbar.svelte b/frontend/src/lib/components/Navbar.svelte
index 93934298..43d63ccd 100644
--- a/frontend/src/lib/components/Navbar.svelte
+++ b/frontend/src/lib/components/Navbar.svelte
@@ -132,40 +132,42 @@
 							<Fa icon={faSwatchbook} />
 							Themes</summary
 						>
-						<ul class="max-h-72 overflow-scroll">
-							{#each availableThemes as theme}
-								<li>
-									<button
-										class="outline-base-content overflow-hidden rounded-lg text-left"
-										data-set-theme={theme}
-										on:click={() => (activeTheme = theme)}
-										on:keydown={() => (activeTheme = theme)}
-									>
-										<div
-											data-theme={theme}
-											class="bg-base-100 text-base-content rounded w-full cursor-pointer font-sans"
+						<ul>
+							<div class="h-fit max-h-72 overflow-scroll">
+								{#each availableThemes as theme}
+									<li>
+										<button
+											class="outline-base-content overflow-hidden rounded-lg text-left"
+											data-set-theme={theme}
+											on:click={() => (activeTheme = theme)}
+											on:keydown={() => (activeTheme = theme)}
 										>
-											<div class="grid grid-cols-5 grid-rows-3">
-												<div
-													class="col-span-5 row-span-3 row-start-1 flex items-center gap-2 px-4 py-3"
-												>
-													<Fa
-														icon={faCheck}
-														class={activeTheme === theme ? 'visible' : 'invisible'}
-													/>
-													<div class="flex-grow text-sm">{theme}</div>
-													<div class="flex h-full flex-shrink-0 flex-wrap gap-1">
-														<div class="bg-primary w-2 rounded" />
-														<div class="bg-secondary w-2 rounded" />
-														<div class="bg-accent w-2 rounded" />
-														<div class="bg-neutral w-2 rounded" />
+											<div
+												data-theme={theme}
+												class="bg-base-100 text-base-content rounded w-full cursor-pointer font-sans"
+											>
+												<div class="grid grid-cols-5 grid-rows-3">
+													<div
+														class="col-span-5 row-span-3 row-start-1 flex items-center gap-2 px-4 py-3"
+													>
+														<Fa
+															icon={faCheck}
+															class={activeTheme === theme ? 'visible' : 'invisible'}
+														/>
+														<div class="flex-grow text-sm">{theme}</div>
+														<div class="flex h-full flex-shrink-0 flex-wrap gap-1">
+															<div class="bg-primary w-2 rounded" />
+															<div class="bg-secondary w-2 rounded" />
+															<div class="bg-accent w-2 rounded" />
+															<div class="bg-neutral w-2 rounded" />
+														</div>
 													</div>
 												</div>
 											</div>
-										</div>
-									</button>
-								</li>
-							{/each}
+										</button>
+									</li>
+								{/each}
+							</div>
 						</ul>
 					</details>
 				</li>