From 96e96ccdf7fd7de4317a540b53af52dad33cf396 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Mon, 27 Jul 2026 12:19:48 +0100
Subject: [PATCH] improved tab styling

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../lib/components/profile/StringCard.svelte  |  2 +-
 .../components/profile/tabs/StarredTab.svelte |  2 +-
 web/src/lib/components/repo/Readme.svelte     |  2 +-
 web/src/lib/components/repo/RepoCard.svelte   |  2 +-
 .../lib/components/repo/RepoIndexView.svelte  |  7 +--
 .../components/repo/issues/IssueCard.svelte   |  2 +-
 web/src/lib/components/shell/Footer.svelte    |  2 +-
 .../lib/components/ui/TabPanel.stories.svelte | 59 +++++++++++++++++++
 web/src/lib/components/ui/TabPanel.svelte     | 39 ++++++++++++
 web/src/lib/components/ui/Tabs.svelte         |  8 +--
 web/src/routes/+error.svelte                  |  2 +-
 web/src/routes/+layout.svelte                 |  2 +-
 web/src/routes/[handle]/+layout.svelte        |  5 +-
 .../[handle]/[repo]/issues/+page.svelte       |  5 +-
 .../[repo]/issues/[aturi]/+page.svelte        |  5 +-
 .../[handle]/[repo]/issues/new/+page.svelte   |  5 +-
 .../[repo]/tree/[ref]/[...path]/+page.svelte  |  7 +--
 web/src/routes/login/+page.svelte             |  2 +-
 18 files changed, 129 insertions(+), 29 deletions(-)
 create mode 100644 web/src/lib/components/ui/TabPanel.stories.svelte
 create mode 100644 web/src/lib/components/ui/TabPanel.svelte

diff --git a/web/src/lib/components/profile/StringCard.svelte b/web/src/lib/components/profile/StringCard.svelte
index 927d48f1..2af23f25 100644
--- a/web/src/lib/components/profile/StringCard.svelte
+++ b/web/src/lib/components/profile/StringCard.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <div
-	class="flex min-h-32 flex-col gap-1 rounded border border-border-default bg-background-default px-6 py-4 shadow-sm"
+	class="flex min-h-32 flex-col gap-1 rounded border border-border-default bg-background-default px-6 py-4 shadow-xs"
 >
 	<div class="flex items-center justify-between font-medium text-foreground-default">
 		<div class="mr-2 flex min-w-0 flex-1 items-center">
diff --git a/web/src/lib/components/profile/tabs/StarredTab.svelte b/web/src/lib/components/profile/tabs/StarredTab.svelte
index ab45d81a..ac2344af 100644
--- a/web/src/lib/components/profile/tabs/StarredTab.svelte
+++ b/web/src/lib/components/profile/tabs/StarredTab.svelte
@@ -13,7 +13,7 @@
 			<RepoCard repo={star.repo} />
 		{:else}
 			<div
-				class="flex items-center gap-2 rounded border border-border-default bg-background-default px-6 py-4 shadow-sm"
+				class="flex items-center gap-2 rounded border border-border-default bg-background-default px-6 py-4 shadow-xs"
 			>
 				<a
 					href={resolve(`/${star.ownerHandle}/strings/${star.rkey}` as "/")}
diff --git a/web/src/lib/components/repo/Readme.svelte b/web/src/lib/components/repo/Readme.svelte
index eccffa91..f571c34a 100644
--- a/web/src/lib/components/repo/Readme.svelte
+++ b/web/src/lib/components/repo/Readme.svelte
@@ -10,7 +10,7 @@
 	let { filename, contents, html = null }: Props = $props();
 </script>
 
-<div class="mt-4 w-full overflow-hidden rounded bg-background-default shadow-sm">
+<div class="mt-4 w-full overflow-hidden rounded bg-background-default shadow-xs border border-border-default">
 	<div class="border-b border-border-default px-4 py-2">
 		<span class="flex items-center gap-2">
 			<FileText class="size-4 text-foreground-subtle" aria-hidden="true" />
diff --git a/web/src/lib/components/repo/RepoCard.svelte b/web/src/lib/components/repo/RepoCard.svelte
index 74a5f184..a649b70f 100644
--- a/web/src/lib/components/repo/RepoCard.svelte
+++ b/web/src/lib/components/repo/RepoCard.svelte
@@ -24,7 +24,7 @@
 </script>
 
 <div
-	class="flex min-h-32 flex-col gap-1 rounded border border-border-default bg-background-default px-6 py-4 shadow-sm"
+	class="flex min-h-32 flex-col gap-1 rounded border border-border-default bg-background-default px-6 py-4"
 >
 	<div class="flex items-start justify-between font-medium text-foreground-default">
 		<div class="mt-1 mr-2 flex min-w-0 flex-1 items-center">
diff --git a/web/src/lib/components/repo/RepoIndexView.svelte b/web/src/lib/components/repo/RepoIndexView.svelte
index 00df70c6..fd7a3709 100644
--- a/web/src/lib/components/repo/RepoIndexView.svelte
+++ b/web/src/lib/components/repo/RepoIndexView.svelte
@@ -12,6 +12,7 @@
 	import Readme from "./Readme.svelte";
 	import RepoToolbar from "./RepoToolbar.svelte";
 	import TagList from "./TagList.svelte";
+	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 	import type { loadRepoIndex } from "$lib/api/repoIndex";
 	import type { RepoInfo } from "./types";
 
@@ -28,9 +29,7 @@
 	const refsCapped = $derived(data.refs.capped);
 </script>
 
-<section
-	class="relative mx-auto w-full rounded bg-background-default px-6 py-4 text-foreground-default"
->
+<TabPanel class="relative mx-auto w-full">
 	{#if data.needsUpgrade}
 		<div class="flex h-96 items-center justify-center text-center text-foreground-danger">
 			<div>
@@ -133,7 +132,7 @@
 			</div>
 		</div>
 	{/if}
-</section>
+</TabPanel>
 
 {#if data.readme}
 	<Readme filename={data.readme.filename} contents={data.readme.contents} html={data.readmeHtml} />
diff --git a/web/src/lib/components/repo/issues/IssueCard.svelte b/web/src/lib/components/repo/issues/IssueCard.svelte
index 3b693367..a3617442 100644
--- a/web/src/lib/components/repo/issues/IssueCard.svelte
+++ b/web/src/lib/components/repo/issues/IssueCard.svelte
@@ -18,7 +18,7 @@
 	);
 </script>
 
-<div class="rounded bg-background-default px-6 py-4 shadow-sm">
+<div class="rounded bg-background-default p-4 shadow-xs border border-border-default">
 	<div class="pb-2">
 		<a {href} class="text-foreground-default no-underline">
 			<span class="hover:underline">{issue.title}</span>
diff --git a/web/src/lib/components/shell/Footer.svelte b/web/src/lib/components/shell/Footer.svelte
index bd1eba15..fd53968f 100644
--- a/web/src/lib/components/shell/Footer.svelte
+++ b/web/src/lib/components/shell/Footer.svelte
@@ -335,7 +335,7 @@
 
 {#if variant === "minimal"}
 	<footer
-		class="w-full border-t border-border-subtle bg-background-default px-6 py-4 pb-[calc(env(safe-area-inset-bottom)+1rem)]"
+		class="w-full border-t border-border-default bg-background-default px-6 py-4 pb-[calc(env(safe-area-inset-bottom)+1rem)]"
 	>
 		<div
 			class="mx-auto flex max-w-screen-lg flex-wrap items-center justify-center gap-x-4 gap-y-2 text-sm text-foreground-subtle"
diff --git a/web/src/lib/components/ui/TabPanel.stories.svelte b/web/src/lib/components/ui/TabPanel.stories.svelte
new file mode 100644
index 00000000..f0156d5a
--- /dev/null
+++ b/web/src/lib/components/ui/TabPanel.stories.svelte
@@ -0,0 +1,59 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import TabPanel from "./TabPanel.svelte";
+	import Tabs from "./Tabs.svelte";
+	import SquareChartGantt from "$icon/square-chart-gantt";
+	import CircleDot from "$icon/circle-dot";
+	import GitPullRequest from "$icon/git-pull-request";
+
+	const tabs = [
+		{ id: "overview", label: "Overview", icon: SquareChartGantt, href: "#" },
+		{ id: "issues", label: "Issues", icon: CircleDot, count: 7, href: "#" },
+		{ id: "pulls", label: "Pulls", icon: GitPullRequest, href: "#" }
+	];
+
+	const { Story } = defineMeta({
+		title: "UI/TabPanel",
+		component: TabPanel,
+		tags: ["autodocs"]
+	});
+</script>
+
+<Story name="Default" asChild>
+	<div class="mx-auto max-w-screen-lg">
+		<Tabs {tabs} active="overview" label="example sections" />
+		<TabPanel>
+			<p>The active tab's bottom edge merges into this panel — one continuous outline.</p>
+		</TabPanel>
+	</div>
+</Story>
+
+<Story name="Second tab active" asChild>
+	<div class="mx-auto max-w-screen-lg">
+		<Tabs {tabs} active="issues" label="example sections" />
+		<TabPanel>
+			<p>"Issues" is active now, and the seam moves with it.</p>
+		</TabPanel>
+	</div>
+</Story>
+
+<Story name="Custom padding" asChild>
+	<div class="mx-auto max-w-screen-lg">
+		<Tabs {tabs} active="overview" label="example sections" />
+		<TabPanel class="py-6">
+			<p>Roomier vertical padding (py-6) for form-heavy pages.</p>
+		</TabPanel>
+	</div>
+</Story>
+
+<Story name="Unpadded grid" asChild>
+	<div class="mx-auto max-w-screen-lg">
+		<Tabs {tabs} active="overview" label="example sections" />
+		<TabPanel as="div" padded={false} class="grid md:grid-cols-3 md:gap-4 md:p-6">
+			<div class="p-6 md:p-0">Sidebar</div>
+			<div class="border-t border-border-default p-6 md:col-span-2 md:border-t-0 md:p-0">
+				Main content laid out by the caller.
+			</div>
+		</TabPanel>
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/TabPanel.svelte b/web/src/lib/components/ui/TabPanel.svelte
new file mode 100644
index 00000000..54de4371
--- /dev/null
+++ b/web/src/lib/components/ui/TabPanel.svelte
@@ -0,0 +1,39 @@
+<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 border border-border-default bg-background-default text-foreground-default",
+		variants: {
+			// the common surface padding; turn off to lay out children yourself
+			padded: {
+				true: "px-6 py-4",
+				false: ""
+			}
+		},
+		defaultVariants: {
+			padded: true
+		}
+	});
+</script>
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		// tag to render as; a semantic <section> by default
+		as?: string;
+		padded?: boolean;
+		class?: string;
+		children: Snippet;
+	}
+
+	let { as = "section", padded = true, class: className, children }: Props = $props();
+</script>
+
+<svelte:element this={as} class={tabPanel({ padded, class: className })}>
+	{@render children()}
+</svelte:element>
diff --git a/web/src/lib/components/ui/Tabs.svelte b/web/src/lib/components/ui/Tabs.svelte
index b9e1ed2a..3efcd2c3 100644
--- a/web/src/lib/components/ui/Tabs.svelte
+++ b/web/src/lib/components/ui/Tabs.svelte
@@ -26,7 +26,7 @@
 	const navClass = $derived(
 		vertical
 			? "h-fit divide-y divide-border-default overflow-hidden rounded border border-border-default"
-			: "flex w-full overflow-x-auto overflow-y-hidden pl-4"
+			: "relative z-10 flex w-full overflow-x-auto overflow-y-hidden pl-4"
 	);
 
 	const itemClass = (isActive: boolean) =>
@@ -36,10 +36,10 @@
 						? "bg-background-default text-foreground-default dark:bg-background-inset"
 						: "bg-background-inset text-foreground-muted hover:text-foreground-default dark:bg-background-default"
 				}`
-			: `relative mr-1 flex items-center rounded-t px-4 py-1 whitespace-nowrap text-foreground-default no-underline hover:no-underline ${
+			: `relative mr-1 flex items-center rounded-t px-4 pt-1 pb-[5px] 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"
+						? "border border-b-0 border-border-default bg-background-default [-webkit-text-stroke:0.3px_currentColor]"
+						: "border border-b-0 border-transparent hover:bg-background-muted hover:dark:bg-background-subtle/50"
 				}`;
 </script>
 
diff --git a/web/src/routes/+error.svelte b/web/src/routes/+error.svelte
index ab92e6a8..59b8194e 100644
--- a/web/src/routes/+error.svelte
+++ b/web/src/routes/+error.svelte
@@ -42,7 +42,7 @@
 </svelte:head>
 
 <section class="flex min-h-[60vh] flex-col items-center justify-center text-center">
-	<div class="mx-auto max-w-lg rounded-lg bg-background-default p-8 shadow-sm">
+	<div class="mx-auto max-w-lg rounded-lg bg-background-default p-8 shadow-xs">
 		<div class="mb-6">
 			<div
 				class={`mx-auto mb-4 flex size-16 items-center justify-center rounded-full ${copy.tone}`}
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index c4615e5f..3699b20c 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -32,7 +32,7 @@
 
 <div
 	class={isAuthShell
-		? "flex min-h-screen flex-col bg-background-canvas text-foreground-default"
+		? "flex min-h-screen flex-col bg-background-default text-foreground-default"
 		: isMarketingShell
 			? "flex min-h-screen flex-col bg-gradient-to-b from-background-default to-background-canvas text-foreground-default"
 			: "flex min-h-screen flex-col bg-background-canvas text-foreground-default"}
diff --git a/web/src/routes/[handle]/+layout.svelte b/web/src/routes/[handle]/+layout.svelte
index 87beb4a8..8f04d623 100644
--- a/web/src/routes/[handle]/+layout.svelte
+++ b/web/src/routes/[handle]/+layout.svelte
@@ -5,6 +5,7 @@
 	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import ProfileCard from "$lib/components/profile/ProfileCard.svelte";
 	import ProfileTabs from "$lib/components/profile/ProfileTabs.svelte";
+	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 
 	let { children, data } = $props();
 
@@ -29,7 +30,7 @@
 		<EmptyState message={`${data.identity.handle} hasn't joined Tangled yet.`} />
 	{:else}
 		<ProfileTabs handle={data.identity.handle} active={activeTab} {counts} />
-		<div class="grid rounded bg-background-default shadow-sm md:grid-cols-11 md:gap-4 md:p-6">
+		<TabPanel as="div" padded={false} class="grid md:grid-cols-11 md:gap-4 md:p-6">
 			<aside class="p-6 md:col-span-3 md:p-0">
 				<ProfileCard
 					identity={data.identity}
@@ -42,6 +43,6 @@
 			<div class="min-w-0 border-t border-border-default p-6 md:col-span-8 md:border-t-0 md:p-0">
 				{@render children()}
 			</div>
-		</div>
+		</TabPanel>
 	{/if}
 </section>
diff --git a/web/src/routes/[handle]/[repo]/issues/+page.svelte b/web/src/routes/[handle]/[repo]/issues/+page.svelte
index cfd3947c..32ad18ab 100644
--- a/web/src/routes/[handle]/[repo]/issues/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/issues/+page.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
 	import IssueList from "$lib/components/repo/issues/IssueList.svelte";
 	import IssueToolbar from "$lib/components/repo/issues/IssueToolbar.svelte";
+	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 
 	let { data } = $props();
 </script>
 
-<section class="rounded bg-background-default px-6 py-4 text-foreground-default shadow-sm">
+<TabPanel padded={false} class="p-4">
 	<IssueToolbar
 		ownerHandle={data.repo.ownerHandle}
 		repoName={data.repo.name}
@@ -13,7 +14,7 @@
 		openCount={data.openCount}
 		closedCount={data.closedCount}
 	/>
-</section>
+</TabPanel>
 
 <div class="mt-2">
 	<IssueList ownerHandle={data.repo.ownerHandle} repoName={data.repo.name} issues={data.issues} />
diff --git a/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.svelte b/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.svelte
index f24b0ca1..521e7bac 100644
--- a/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.svelte
@@ -6,6 +6,7 @@
 	import CommentList from "$lib/components/comment/CommentList.svelte";
 	import CommentBox from "$lib/components/comment/CommentBox.svelte";
 	import SignupPrompt from "$lib/components/ui/SignupPrompt.svelte";
+	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 	import IssueForm from "$lib/components/repo/issues/IssueForm.svelte";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
 	import Pencil from "$icon/pencil";
@@ -119,7 +120,7 @@
 <div class="grid grid-cols-1 gap-4 lg:grid-cols-10">
 	<!-- conversation -->
 	<div class="lg:col-span-8">
-		<section class="rounded bg-background-default px-6 py-4 text-foreground-default shadow-sm">
+		<TabPanel>
 			{#if editing}
 				<IssueForm
 					mode="edit"
@@ -148,7 +149,7 @@
 					</div>
 				{/if}
 			{/if}
-		</section>
+		</TabPanel>
 
 		<div class="mt-4 flex flex-col gap-4">
 			<CommentList
diff --git a/web/src/routes/[handle]/[repo]/issues/new/+page.svelte b/web/src/routes/[handle]/[repo]/issues/new/+page.svelte
index e3f00047..cce8b916 100644
--- a/web/src/routes/[handle]/[repo]/issues/new/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/issues/new/+page.svelte
@@ -3,6 +3,7 @@
 	import { page } from "$app/state";
 	import { resolve } from "$app/paths";
 	import IssueForm from "$lib/components/repo/issues/IssueForm.svelte";
+	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 
 	let { data } = $props();
 
@@ -29,7 +30,7 @@
 	<title>New issue · {data.repo.ownerHandle}/{data.repo.name} · Tangled</title>
 </svelte:head>
 
-<section class="mt-2 rounded bg-background-default px-6 py-6 text-foreground-default shadow-sm">
+<TabPanel class="py-6">
 	<h1 class="mb-4 text-xl font-bold text-foreground-default">Create a new issue</h1>
 	<IssueForm
 		{markup}
@@ -37,4 +38,4 @@
 		onsaved={handleSaved}
 		oncancel={handleCancel}
 	/>
-</section>
+</TabPanel>
diff --git a/web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte b/web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte
index 89362def..11420b94 100644
--- a/web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte
@@ -3,15 +3,14 @@
 	import LastCommitPanel from "$lib/components/repo/LastCommitPanel.svelte";
 	import Readme from "$lib/components/repo/Readme.svelte";
 	import TreeHeader from "$lib/components/repo/TreeHeader.svelte";
+	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 
 	let { data } = $props();
 
 	const repo = $derived(data.repo);
 </script>
 
-<section
-	class="relative mx-auto w-full rounded bg-background-default px-6 py-4 text-foreground-default"
->
+<TabPanel class="relative mx-auto w-full">
 	<TreeHeader
 		ownerHandle={repo.ownerHandle}
 		repoName={repo.name}
@@ -33,7 +32,7 @@
 		path={data.path}
 		withMessage
 	/>
-</section>
+</TabPanel>
 
 {#if data.readme}
 	<Readme filename={data.readme.filename} contents={data.readme.contents} html={data.readmeHtml} />
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index 2449209a..236716d1 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -98,7 +98,7 @@
 
 	{#if auth.error}
 		<div
-			class="my-2 flex gap-2 rounded border border-border-danger bg-background-danger-subtle px-3 py-2 text-foreground-danger drop-shadow-sm"
+			class="my-2 flex gap-2 rounded border border-border-danger bg-background-danger-subtle px-3 py-2 text-foreground-danger shadow-xs"
 		>
 			<span class="py-1" aria-hidden="true"><CircleAlert class="size-4" /></span>
 			<div>
-- 
2.51.2