From 7467eed78e558a7b56f374e3f48f72175484bb90 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 16 Jul 2026 17:25:37 +0200
Subject: [PATCH] web/ui: clean up Tabs.svelte nesting

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/ui/Tabs.svelte | 55 +++++++++++++--------------
 1 file changed, 26 insertions(+), 29 deletions(-)

diff --git a/web/src/lib/components/ui/Tabs.svelte b/web/src/lib/components/ui/Tabs.svelte
index e12b7b39..443efe03 100644
--- a/web/src/lib/components/ui/Tabs.svelte
+++ b/web/src/lib/components/ui/Tabs.svelte
@@ -23,34 +23,31 @@
 	let { tabs, active, label }: Props = $props();
 </script>
 
-<nav class="w-full overflow-x-auto overflow-y-hidden pl-4" aria-label={label}>
-	<div class="flex">
-		{#each tabs as tab (tab.id)}
-			{@const isActive = active === tab.id}
-			{@const Glyph = tab.icon}
-			<a
-				href={resolve(tab.href as "/")}
-				class="group relative -mr-px no-underline hover:no-underline"
-				aria-current={isActive ? "page" : undefined}
-			>
-				<div
-					class={`relative mr-1 min-w-[80px] rounded-t px-4 py-1 text-center whitespace-nowrap text-foreground-default ${
-						isActive
-							? "-mb-px bg-background-default font-medium"
-							: "group-hover:bg-background-inset/25"
-					}`}
+<nav class="flex w-full overflow-x-auto overflow-y-hidden pl-4" aria-label={label}>
+	{#each tabs as tab (tab.id)}
+		{@const isActive = active === tab.id}
+		{@const Glyph = tab.icon}
+		<a
+			href={tab.href.startsWith("/") ? resolve(tab.href as "/") : tab.href}
+			aria-current={isActive ? "page" : undefined}
+			class={`relative mr-1 flex items-center rounded-t px-4 py-1 whitespace-nowrap text-foreground-default no-underline hover:no-underline ${
+				isActive
+					? "-mb-px bg-background-default [-webkit-text-stroke:0.3px_currentColor]"
+					: "hover:bg-background-inset"
+			}`}
+		>
+			{#if Glyph}
+				<Glyph class="mr-2 h-4 w-4" aria-hidden="true" />
+			{/if}
+			<span class="flex flex-col">
+				{tab.label}
+				<span aria-hidden="true" class="invisible h-0 select-none overflow-hidden font-medium"
+					>{tab.label}</span
 				>
-					<span class="flex items-center justify-center">
-						{#if Glyph}
-							<Glyph class="mr-2 h-4 w-4" aria-hidden="true" />
-						{/if}
-						{tab.label}
-						{#if tab.count}
-							<span class="ml-1 rounded bg-background-inset px-1 text-sm">{tab.count}</span>
-						{/if}
-					</span>
-				</div>
-			</a>
-		{/each}
-	</div>
+			</span>
+			{#if tab.count}
+				<span class="ml-1 rounded bg-background-inset px-1 text-sm">{tab.count}</span>
+			{/if}
+		</a>
+	{/each}
 </nav>
-- 
2.51.2