From 7b9e03dba7d78c04835704e1b60e509351421b05 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Fri, 31 Jul 2026 15:29:03 +0200
Subject: [PATCH] web/components: add `overlapBottom` prop to Tabs

---
 web/src/lib/components/repo/RepoIndexView.svelte | 2 +-
 web/src/lib/components/repo/RepoTabs.svelte      | 2 +-
 web/src/lib/components/ui/TabPanel.svelte        | 6 +-----
 web/src/lib/components/ui/Tabs.svelte            | 5 +++--
 4 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/web/src/lib/components/repo/RepoIndexView.svelte b/web/src/lib/components/repo/RepoIndexView.svelte
index baa4e3fc..283a4102 100644
--- a/web/src/lib/components/repo/RepoIndexView.svelte
+++ b/web/src/lib/components/repo/RepoIndexView.svelte
@@ -29,7 +29,7 @@
 	const refsCapped = $derived(data.refs.capped);
 </script>
 
-<TabPanel class="relative mx-auto mt-px w-full">
+<TabPanel>
 	{#if data.needsUpgrade}
 		<div class="flex h-96 items-center justify-center text-center text-foreground-danger">
 			<div>
diff --git a/web/src/lib/components/repo/RepoTabs.svelte b/web/src/lib/components/repo/RepoTabs.svelte
index 4483be61..b7826854 100644
--- a/web/src/lib/components/repo/RepoTabs.svelte
+++ b/web/src/lib/components/repo/RepoTabs.svelte
@@ -40,4 +40,4 @@
 	]);
 </script>
 
-<Tabs {tabs} {active} label="repository sections" />
+<Tabs overlapBottom={true} {tabs} {active} label="repository sections" />
diff --git a/web/src/lib/components/ui/TabPanel.svelte b/web/src/lib/components/ui/TabPanel.svelte
index 423a3790..c8d3ad0d 100644
--- a/web/src/lib/components/ui/TabPanel.svelte
+++ b/web/src/lib/components/ui/TabPanel.svelte
@@ -1,12 +1,8 @@
 <script module lang="ts">
 	import { tv } from "tailwind-variants";
 
-	// the surface that docks directly beneath a <Tabs> bar. it pulls itself up 1px
-	// so its top border tucks behind the bar, where the active tab's raised, opaque
-	// background hides the seam — producing the connected "folder tab" look. keep it
-	// flush against the tab bar (no margin between them) for the join to line up.
 	export const tabPanel = tv({
-		base: "-mt-px rounded-sm border border-border-default bg-background-default text-foreground-default",
+		base: "rounded-sm border border-border-default bg-background-default text-foreground-default",
 		variants: {
 			// the common surface padding; turn off to lay out children yourself
 			padded: {
diff --git a/web/src/lib/components/ui/Tabs.svelte b/web/src/lib/components/ui/Tabs.svelte
index 55f7f9a3..65fd0c79 100644
--- a/web/src/lib/components/ui/Tabs.svelte
+++ b/web/src/lib/components/ui/Tabs.svelte
@@ -19,9 +19,10 @@
 		active: string;
 		label?: string;
 		vertical?: boolean;
+		overlapBottom?: boolean;
 	}
 
-	let { tabs, active, label, vertical = false }: Props = $props();
+	let { tabs, active, label, vertical = false, overlapBottom = false }: Props = $props();
 
 	const navClass = $derived(
 		vertical
@@ -43,7 +44,7 @@
 				}`;
 </script>
 
-<nav class={navClass} aria-label={label}>
+<nav class={[navClass, overlapBottom && "-mb-px"]} aria-label={label}>
 	{#each tabs as tab (tab.id)}
 		{@const isActive = active === tab.id}
 		{@const Glyph = tab.icon}
-- 
2.51.2