diff --git a/web/src/app.css b/web/src/app.css
index e77fabe1..de08cf6d 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -253,18 +253,61 @@
 	line-height: 1.25rem;
 }
 
+/* One tab's content giving way to another's. TabContent publishes the motion as
+   custom properties on the region it wraps; the rules below decide which boxes
+   actually travel, because a panel welded to the tab bar above it has to hold
+   still — a border sliding out from under the active tab breaks the join. */
+@keyframes tab-in {
+	from {
+		translate: var(--tab-from, 0);
+		opacity: 0;
+	}
+}
+
+@layer components {
+	/* everything a tab route lays down travels as one, so a page carrying content
+	   below its card — an overview's readme, an issue list — moves with it. only a
+	   panel's own box is held back, which means everything inside it still travels:
+	   a settings sidebar is chrome for its own sub-nav but content for this move,
+	   arriving on screen for the first time along with the rest */
+	[data-tab-motion] > *:not([data-tab-panel]),
+	[data-tab-motion] > [data-tab-panel] > * {
+		translate: var(--tab-shift, 0);
+		opacity: var(--tab-fade, 1);
+		transition:
+			translate var(--tab-out-duration, 0ms) var(--tab-out-ease, linear),
+			opacity var(--tab-out-duration, 0ms) var(--tab-out-ease, linear);
+		animation: var(--tab-enter, none) var(--tab-in-duration, 0ms) var(--tab-in-ease, linear) both;
+	}
+
+	/* the panel keeps its box and clips whatever its body slides past. `clip` and
+	   not `hidden`, so the vertical axis stays visible and the sticky diff headers
+	   inside still resolve against the document */
+	[data-tab-motion] > [data-tab-panel] {
+		overflow-x: clip;
+	}
+}
+
 @utility popover-transition {
 	opacity: 0;
 	scale: 0.98;
+	/* a transition reads off the state it lands on, so this one is the exit. the
+	   two discrete properties are what keep a closing panel painted long enough
+	   to run it, and firefox has neither — it leans on the popoverExit
+	   attachment instead, which every panel using this utility needs */
 	transition:
-		opacity 120ms ease-out,
-		scale 120ms ease-out,
-		overlay 120ms allow-discrete,
-		display 120ms allow-discrete;
+		opacity 100ms ease-in,
+		scale 100ms ease-in,
+		overlay 100ms allow-discrete,
+		display 100ms allow-discrete;
 
 	&:popover-open {
 		opacity: 1;
 		scale: 1;
+		/* and this one is the entry */
+		transition:
+			opacity 75ms ease-out,
+			scale 75ms ease-out;
 	}
 
 	@starting-style {
diff --git a/web/src/lib/components/profile/ProfileTabs.svelte b/web/src/lib/components/profile/ProfileTabs.svelte
index 1b9b7b61..db1c792a 100644
--- a/web/src/lib/components/profile/ProfileTabs.svelte
+++ b/web/src/lib/components/profile/ProfileTabs.svelte
@@ -1,10 +1,6 @@
 <script lang="ts">
-	import SquareChartGantt from "$icon/square-chart-gantt";
-	import BookMarked from "$icon/book-marked";
-	import Star from "$icon/star";
-	import LineSquiggle from "$icon/line-squiggle";
-	import Shield from "$icon/shield";
-	import Tabs, { type TabDef } from "$lib/components/ui/Tabs.svelte";
+	import Tabs from "$lib/components/ui/Tabs.svelte";
+	import { profileTabs } from "./tabs/defs";
 	import type { ProfileCounts } from "./types";
 
 	interface Props {
@@ -15,27 +11,7 @@
 
 	let { handle, active, counts }: Props = $props();
 
-	const hrefFor = (id: string) => (id === "overview" ? `/${handle}` : `/${handle}?tab=${id}`);
-
-	const tabs = $derived<TabDef[]>([
-		{ id: "overview", label: "Overview", icon: SquareChartGantt, href: hrefFor("overview") },
-		{
-			id: "repos",
-			label: "Repositories",
-			icon: BookMarked,
-			count: counts.repos,
-			href: hrefFor("repos")
-		},
-		{ id: "starred", label: "Starred", icon: Star, count: counts.stars, href: hrefFor("starred") },
-		{
-			id: "strings",
-			label: "Strings",
-			icon: LineSquiggle,
-			count: counts.strings,
-			href: hrefFor("strings")
-		},
-		{ id: "vouches", label: "Vouches", icon: Shield, href: hrefFor("vouches") }
-	]);
+	const tabs = $derived(profileTabs(handle, counts));
 </script>
 
 <Tabs {tabs} {active} overlapBottom={true} label="profile sections" />
diff --git a/web/src/lib/components/profile/tabs/defs.ts b/web/src/lib/components/profile/tabs/defs.ts
new file mode 100644
index 00000000..febbb4d6
--- /dev/null
+++ b/web/src/lib/components/profile/tabs/defs.ts
@@ -0,0 +1,34 @@
+// the profile tab bar, shared by the nav that draws it and the layout's content
+// transition — both have to agree on the ids and on their left-to-right order,
+// which is what decides the direction the content slides
+
+import SquareChartGantt from "$icon/square-chart-gantt";
+import BookMarked from "$icon/book-marked";
+import Star from "$icon/star";
+import LineSquiggle from "$icon/line-squiggle";
+import Shield from "$icon/shield";
+import type { TabDef } from "$lib/components/ui/Tabs.svelte";
+import type { ProfileCounts } from "../types";
+
+export const profileTabs = (handle: string, counts: ProfileCounts): TabDef[] => {
+	const href = (id: string) => (id === "overview" ? `/${handle}` : `/${handle}?tab=${id}`);
+	return [
+		{ id: "overview", label: "Overview", icon: SquareChartGantt, href: href("overview") },
+		{
+			id: "repos",
+			label: "Repositories",
+			icon: BookMarked,
+			count: counts.repos,
+			href: href("repos")
+		},
+		{ id: "starred", label: "Starred", icon: Star, count: counts.stars, href: href("starred") },
+		{
+			id: "strings",
+			label: "Strings",
+			icon: LineSquiggle,
+			count: counts.strings,
+			href: href("strings")
+		},
+		{ id: "vouches", label: "Vouches", icon: Shield, href: href("vouches") }
+	];
+};
diff --git a/web/src/lib/components/repo/RepoTabs.svelte b/web/src/lib/components/repo/RepoTabs.svelte
index b7826854..b6254c63 100644
--- a/web/src/lib/components/repo/RepoTabs.svelte
+++ b/web/src/lib/components/repo/RepoTabs.svelte
@@ -1,10 +1,6 @@
 <script lang="ts">
-	import SquareChartGantt from "$icon/square-chart-gantt";
-	import CircleDot from "$icon/circle-dot";
-	import GitPullRequest from "$icon/git-pull-request";
-	import Layers2 from "$icon/layers-2";
-	import Settings from "$icon/settings";
-	import Tabs, { type TabDef } from "$lib/components/ui/Tabs.svelte";
+	import Tabs from "$lib/components/ui/Tabs.svelte";
+	import { repoTabs } from "./tabs";
 	import type { RepoCounts, RepoInfo } from "./types";
 
 	interface Props {
@@ -15,29 +11,7 @@
 
 	let { repo, counts, active }: Props = $props();
 
-	const base = $derived(`/${repo.ownerHandle}/${repo.name}`);
-
-	const tabs = $derived<TabDef[]>([
-		{ id: "overview", label: "Overview", icon: SquareChartGantt, href: base },
-		{
-			id: "issues",
-			label: "Issues",
-			icon: CircleDot,
-			count: counts.issues,
-			href: `${base}/issues`
-		},
-		{
-			id: "pulls",
-			label: "Pulls",
-			icon: GitPullRequest,
-			count: counts.pulls,
-			href: `${base}/pulls`
-		},
-		{ id: "pipelines", label: "Pipelines", icon: Layers2, href: `${base}/pipelines` },
-		// todo: only show this to collaborators — needs the viewer's push access on
-		// RepoInfo, which the layout load doesn't resolve yet
-		{ id: "settings", label: "Settings", icon: Settings, href: `${base}/settings` }
-	]);
+	const tabs = $derived(repoTabs(repo, counts));
 </script>
 
 <Tabs overlapBottom={true} {tabs} {active} label="repository sections" />
diff --git a/web/src/lib/components/repo/tabs.ts b/web/src/lib/components/repo/tabs.ts
new file mode 100644
index 00000000..44fccfc5
--- /dev/null
+++ b/web/src/lib/components/repo/tabs.ts
@@ -0,0 +1,36 @@
+// the repository tab bar, shared by the nav that draws it and the layout's
+// content transition — both have to agree on the ids and on their left-to-right
+// order, which is what decides the direction the content slides
+
+import SquareChartGantt from "$icon/square-chart-gantt";
+import CircleDot from "$icon/circle-dot";
+import GitPullRequest from "$icon/git-pull-request";
+import Layers2 from "$icon/layers-2";
+import Settings from "$icon/settings";
+import type { TabDef } from "$lib/components/ui/Tabs.svelte";
+import type { RepoCounts, RepoInfo } from "./types";
+
+export const repoTabs = (repo: RepoInfo, counts: RepoCounts): TabDef[] => {
+	const base = `/${repo.ownerHandle}/${repo.name}`;
+	return [
+		{ id: "overview", label: "Overview", icon: SquareChartGantt, href: base },
+		{
+			id: "issues",
+			label: "Issues",
+			icon: CircleDot,
+			count: counts.issues,
+			href: `${base}/issues`
+		},
+		{
+			id: "pulls",
+			label: "Pulls",
+			icon: GitPullRequest,
+			count: counts.pulls,
+			href: `${base}/pulls`
+		},
+		{ id: "pipelines", label: "Pipelines", icon: Layers2, href: `${base}/pipelines` },
+		// todo: only show this to collaborators — needs the viewer's push access on
+		// RepoInfo, which the layout load doesn't resolve yet
+		{ id: "settings", label: "Settings", icon: Settings, href: `${base}/settings` }
+	];
+};
diff --git a/web/src/lib/components/settings/SettingsPanel.svelte b/web/src/lib/components/settings/SettingsPanel.svelte
index 217fe963..cde6e50d 100644
--- a/web/src/lib/components/settings/SettingsPanel.svelte
+++ b/web/src/lib/components/settings/SettingsPanel.svelte
@@ -15,8 +15,11 @@
 <!-- Two shapes for one screen: a bordered card with the nav down its left edge on
      desktop, and below md a full-bleed panel that only keeps its top and bottom
      hairlines, since the phone frame already supplies the side margins. -->
+<!-- data-tab-panel holds this box still under a tab transition so it stays welded
+     to the bar above it; the nav and the content inside both travel, see app.css -->
 <div
 	class="flex w-full flex-col items-stretch gap-4 border-y border-border-default bg-background-default px-3 pt-3 pb-6 md:min-h-150 md:flex-row md:items-start md:overflow-hidden md:rounded-sm md:border md:p-0"
+	data-tab-panel
 >
 	<SettingsNav {items} {active} {label} />
 
diff --git a/web/src/lib/components/ui/TabContent.svelte b/web/src/lib/components/ui/TabContent.svelte
new file mode 100644
index 00000000..2d78a8df
--- /dev/null
+++ b/web/src/lib/components/ui/TabContent.svelte
@@ -0,0 +1,114 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	// tune the feel here: the exit duration is also latency, since the swap is held
+	// open for it, and a hovered tab has usually preloaded by the time you click
+	const DISTANCE = 4;
+	const OUT_DURATION = 75;
+	const OUT_EASE = "ease-in";
+	const IN_DURATION = 75;
+	const IN_EASE = "ease-out";
+
+	export const tabContent = tv({
+		// the content travels sideways, so its overflow has to go somewhere. `clip`
+		// rather than `hidden` because clip doesn't make a scroll container, which
+		// keeps the vertical axis visible and leaves `sticky` children inside alone
+		base: "overflow-x-clip"
+	});
+
+	export type TabContentVariants = VariantProps<typeof tabContent>;
+</script>
+
+<script lang="ts">
+	import { beforeNavigate, onNavigate } from "$app/navigation";
+	import { navigating } from "$app/state";
+	import { tick, type Snippet } from "svelte";
+	import { prefersReducedMotion } from "svelte/motion";
+	import { resolveTabs, tabForUrl, type TabDef } from "./Tabs.svelte";
+
+	interface Props {
+		/** the same defs the matching <Tabs> gets, so the content and the plate agree on where a click lands */
+		tabs: TabDef[];
+		/** id of the tab whose content is on screen */
+		active: string;
+		/** travel up and down instead of side to side, to echo a vertical bar's plate */
+		vertical?: boolean;
+		class?: string;
+		children: Snippet;
+	}
+
+	let { tabs: defs, active, vertical = false, class: className, children }: Props = $props();
+
+	const items = $derived(resolveTabs(defs));
+
+	// which tab a pending navigation is headed for, matched the same way the plate
+	// matches it — so a move deeper inside the same tab (an issue, a file, a
+	// settings subpage) resolves to `active` and never animates
+	const pending = $derived(navigating.to ? tabForUrl(items, navigating.to.url) : undefined);
+	const leaving = $derived(
+		!prefersReducedMotion.current && pending !== undefined && pending !== active
+	);
+
+	// +1 heading right along the bar, -1 heading left, so the content leaves the
+	// same way the plate behind the tabs is travelling
+	const away = $derived.by(() => {
+		if (!leaving) return 1;
+		const from = items.findIndex((item) => item.id === active);
+		const to = items.findIndex((item) => item.id === pending);
+		return to > from ? 1 : -1;
+	});
+
+	// the direction the arriving content comes in from, held only for as long as the
+	// entrance lasts: content that mounts outside a tab switch — an issue opening,
+	// a file being browsed — must not inherit the keyframes and animate too
+	let entering = $state(0);
+	let settle: ReturnType<typeof setTimeout>;
+
+	// the exit starts the moment you click, but onNavigate only runs once the route's
+	// data has landed, so measuring from here lets the hold below give a preloaded
+	// tab a real exit while charging a slow one nothing extra
+	let leftAt = 0;
+	beforeNavigate(() => {
+		leftAt = performance.now();
+	});
+
+	onNavigate(() => {
+		if (!leaving) return;
+		const direction = away;
+		const remaining = Math.max(0, OUT_DURATION - (performance.now() - leftAt));
+		return new Promise<void>((done) =>
+			setTimeout(async () => {
+				entering = direction;
+				clearTimeout(settle);
+				settle = setTimeout(() => (entering = 0), IN_DURATION);
+				// the keyframes have to be on the region before SvelteKit swaps the
+				// content in, or the arriving content paints one frame at full opacity
+				await tick();
+				done();
+			}, remaining)
+		);
+	});
+
+	const travel = (offset: number) => (vertical ? `0 ${offset}px` : `${offset}px`);
+
+	// every property is declared on every render, idle values included. a region
+	// nested inside another one — the repository settings sub-nav sits inside the
+	// repository tabs — would otherwise inherit the outer region's travel and move
+	// twice: once because the card body it lives in is moving, once on its own
+	const motion = $derived(
+		[
+			`--tab-out-duration: ${OUT_DURATION}ms`,
+			`--tab-out-ease: ${OUT_EASE}`,
+			`--tab-in-duration: ${IN_DURATION}ms`,
+			`--tab-in-ease: ${IN_EASE}`,
+			`--tab-shift: ${leaving ? travel(away * -DISTANCE) : "0"}`,
+			`--tab-fade: ${leaving ? 0 : 1}`,
+			`--tab-from: ${entering ? travel(entering * DISTANCE) : "0"}`,
+			`--tab-enter: ${entering ? "tab-in" : "none"}`
+		].join("; ")
+	);
+</script>
+
+<div class={tabContent({ class: className })} style={motion} data-tab-motion>
+	{@render children()}
+</div>
diff --git a/web/src/lib/components/ui/TabPanel.svelte b/web/src/lib/components/ui/TabPanel.svelte
index c8d3ad0d..5396a281 100644
--- a/web/src/lib/components/ui/TabPanel.svelte
+++ b/web/src/lib/components/ui/TabPanel.svelte
@@ -2,12 +2,20 @@
 	import { tv } from "tailwind-variants";
 
 	export const tabPanel = tv({
-		base: "rounded-sm border border-border-default bg-background-default text-foreground-default",
+		slots: {
+			// the card itself: chrome only, so its box can hold still and stay welded to
+			// the tab bar above it while a transition moves what's inside
+			surface:
+				"rounded-sm border border-border-default bg-background-default text-foreground-default",
+			// everything the caller lays out lives in here, which is also what a tab
+			// transition travels — see the [data-tab-motion] rules in app.css
+			body: ""
+		},
 		variants: {
 			// the common surface padding; turn off to lay out children yourself
 			padded: {
-				true: "px-6 py-4",
-				false: ""
+				true: { body: "px-6 py-4" },
+				false: {}
 			}
 		},
 		defaultVariants: {
@@ -28,8 +36,12 @@
 	}
 
 	let { as = "section", padded = true, class: className, children }: Props = $props();
+
+	const style = $derived(tabPanel({ padded }));
 </script>
 
-<svelte:element this={as} class={tabPanel({ padded, class: className })}>
-	{@render children()}
+<svelte:element this={as} class={style.surface()} data-tab-panel>
+	<div class={style.body({ class: className })}>
+		{@render children()}
+	</div>
 </svelte:element>
diff --git a/web/src/lib/components/ui/Tabs.svelte b/web/src/lib/components/ui/Tabs.svelte
index f1858e7e..7de792ab 100644
--- a/web/src/lib/components/ui/Tabs.svelte
+++ b/web/src/lib/components/ui/Tabs.svelte
@@ -1,4 +1,6 @@
 <script module lang="ts">
+	import { resolve } from "$app/paths";
+	import type { ResolvedPathname } from "$app/types";
 	import type { Component } from "svelte";
 	import type { SvelteHTMLElements } from "svelte/elements";
 	import { tv, type VariantProps } from "tailwind-variants";
@@ -11,6 +13,35 @@
 		count?: number;
 	}
 
+	export interface ResolvedTab extends TabDef {
+		url: ResolvedPathname;
+	}
+
+	// resolved up front so a destination url can be matched against a tab's href
+	export const resolveTabs = (defs: TabDef[]): ResolvedTab[] =>
+		defs.map((tab) => ({
+			...tab,
+			url: (tab.href.startsWith("/") ? resolve(tab.href as "/") : tab.href) as ResolvedPathname
+		}));
+
+	/** which tab owns a url, or undefined when none of them does */
+	export const tabForUrl = (items: ResolvedTab[], url: URL): string | undefined => {
+		let best: string | undefined;
+		let bestLength = -1;
+		for (const item of items) {
+			if (item.url === url.pathname + url.search) return item.id;
+			// a plain path also owns everything nested under it, so an issue page
+			// keeps the issues tab lit; a query-scoped tab only matches exactly
+			if (item.url.includes("?")) continue;
+			const owns = url.pathname === item.url || url.pathname.startsWith(`${item.url}/`);
+			if (owns && item.url.length > bestLength) {
+				best = item.id;
+				bestLength = item.url.length;
+			}
+		}
+		return best;
+	};
+
 	export const tabs = tv({
 		slots: {
 			nav: "",
@@ -47,7 +78,8 @@
 					count: "bg-background-muted"
 				},
 				false: {
-					count: "bg-background-muted group-hover/item:bg-background-strong dark:bg-background-subtle group-hover/item:dark:bg-background-subtle"
+					count:
+						"bg-background-muted group-hover/item:bg-background-strong dark:bg-background-subtle group-hover/item:dark:bg-background-subtle"
 				}
 			},
 			ready: { true: { plate: "opacity-100" }, false: { plate: "opacity-0" } },
@@ -91,9 +123,7 @@
 </script>
 
 <script lang="ts">
-	import { resolve } from "$app/paths";
 	import { navigating } from "$app/state";
-	import type { ResolvedPathname } from "$app/types";
 	import { Spring, prefersReducedMotion } from "svelte/motion";
 
 	interface Props {
@@ -114,13 +144,7 @@
 		class: navClass
 	}: Props = $props();
 
-	// resolved up front so the plate can match hrefs against the destination url
-	const items = $derived(
-		defs.map((tab) => ({
-			...tab,
-			url: (tab.href.startsWith("/") ? resolve(tab.href as "/") : tab.href) as ResolvedPathname
-		}))
-	);
+	const items = $derived(resolveTabs(defs));
 
 	// the plate follows where we're heading rather than where we are, so it leaves
 	// the moment you click instead of waiting on the route's load; aria-current
@@ -128,19 +152,7 @@
 	const selected = $derived.by(() => {
 		const dest = navigating.to?.url;
 		if (!dest) return active;
-
-		let best: string | undefined;
-		let bestLength = -1;
-		for (const item of items) {
-			if (item.url === dest.pathname + dest.search) return item.id;
-			if (item.url.includes("?")) continue;
-			const owns = dest.pathname === item.url || dest.pathname.startsWith(`${item.url}/`);
-			if (owns && item.url.length > bestLength) {
-				best = item.id;
-				bestLength = item.url.length;
-			}
-		}
-		return best ?? active;
+		return tabForUrl(items, dest) ?? active;
 	});
 
 	let nav = $state<HTMLElement>();
diff --git a/web/src/routes/[handle]/+layout.svelte b/web/src/routes/[handle]/+layout.svelte
index 8f04d623..e133b247 100644
--- a/web/src/routes/[handle]/+layout.svelte
+++ b/web/src/routes/[handle]/+layout.svelte
@@ -5,6 +5,8 @@
 	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 { profileTabs } from "$lib/components/profile/tabs/defs";
+	import TabContent from "$lib/components/ui/TabContent.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 
 	let { children, data } = $props();
@@ -15,6 +17,7 @@
 	);
 	setContext(PROFILE_COUNTS_KEY, profileCounts);
 	const counts = $derived(profileCounts.value);
+	const tabs = $derived(profileTabs(data.identity.handle, counts));
 	const tabParam = $derived(page.url.searchParams.get("tab") ?? "overview");
 	const activeTab = $derived(
 		["repos", "starred", "strings", "vouches"].includes(tabParam) ? tabParam : "overview"
@@ -40,9 +43,15 @@
 					viewerFollowRkey={data.viewerFollowRkey}
 				/>
 			</aside>
-			<div class="min-w-0 border-t border-border-default p-6 md:col-span-8 md:border-t-0 md:p-0">
+			<!-- only the right column moves: the profile card beside it is the same on
+			     every tab, so the region goes here rather than around the panel -->
+			<TabContent
+				{tabs}
+				active={activeTab}
+				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>
+			</TabContent>
 		</TabPanel>
 	{/if}
 </section>
diff --git a/web/src/routes/[handle]/[repo]/+layout@.svelte b/web/src/routes/[handle]/[repo]/+layout@.svelte
index bbd51eb1..92db4271 100644
--- a/web/src/routes/[handle]/[repo]/+layout@.svelte
+++ b/web/src/routes/[handle]/[repo]/+layout@.svelte
@@ -4,9 +4,13 @@
 	import { page } from "$app/state";
 	import RepoHeader from "$lib/components/repo/RepoHeader.svelte";
 	import RepoTabs from "$lib/components/repo/RepoTabs.svelte";
+	import { repoTabs } from "$lib/components/repo/tabs";
+	import TabContent from "$lib/components/ui/TabContent.svelte";
 
 	let { children, data } = $props();
 
+	const tabs = $derived(repoTabs(data.repo, data.counts));
+
 	const fullName = $derived(`${data.repo.ownerHandle}/${data.repo.name}`);
 	const repoUrl = $derived(`${page.url.origin}/${fullName}`);
 	const fullNameWithoutAt = $derived(fullName.replace(/^@/, ""));
@@ -51,5 +55,7 @@
 		<RepoHeader repo={data.repo} counts={data.counts} viewerStarRkey={data.viewerStarRkey} />
 		<RepoTabs repo={data.repo} counts={data.counts} active={activeTab} />
 	{/if}
-	{@render children()}
+	<TabContent {tabs} active={activeTab}>
+		{@render children()}
+	</TabContent>
 </section>
diff --git a/web/src/routes/[handle]/[repo]/settings/+layout.svelte b/web/src/routes/[handle]/[repo]/settings/+layout.svelte
index fb2e78dc..d3c22366 100644
--- a/web/src/routes/[handle]/[repo]/settings/+layout.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/+layout.svelte
@@ -2,6 +2,7 @@
 	import { page } from "$app/state";
 	import type { SettingsNavItem } from "$lib/components/settings/SettingsNav.svelte";
 	import SettingsPanel from "$lib/components/settings/SettingsPanel.svelte";
+	import TabContent from "$lib/components/ui/TabContent.svelte";
 	import SlidersHorizontal from "$icon/sliders-horizontal";
 	import UsersRound from "$icon/users-round";
 	import Layers from "$icon/layers";
@@ -26,6 +27,12 @@
 	const active = $derived(items.some((i) => i.id === segment) ? segment : "general");
 </script>
 
+<!-- the sub-nav is its own tab set, so it needs its own transition: the repo tabs
+     above resolve every settings subpage to the one "settings" tab and sit this
+     move out. travel is vertical here to follow the sidebar's plate, and the flex
+     column has to live on the region itself or the sections inside lose their gap -->
 <SettingsPanel {items} {active} label="Repository settings">
-	{@render children()}
+	<TabContent tabs={items} {active} vertical class="flex w-full min-w-0 flex-col gap-6 md:gap-8">
+		{@render children()}
+	</TabContent>
 </SettingsPanel>
diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte
index a5b82740..36256f6a 100644
--- a/web/src/routes/settings/+layout.svelte
+++ b/web/src/routes/settings/+layout.svelte
@@ -2,6 +2,7 @@
 	import { page } from "$app/state";
 	import type { SettingsNavItem } from "$lib/components/settings/SettingsNav.svelte";
 	import SettingsPanel from "$lib/components/settings/SettingsPanel.svelte";
+	import TabContent from "$lib/components/ui/TabContent.svelte";
 	import User from "$icon/user-round";
 	import Key from "$icon/key";
 	import Mail from "$icon/mail";
@@ -16,7 +17,12 @@
 		{ id: "profile", label: "Profile", href: "/settings", icon: User },
 		{ id: "keys", label: "Keys", href: "/settings/keys", icon: Key },
 		{ id: "emails", label: "Emails", href: "/settings/emails", icon: Mail },
-		{ id: "notifications", label: "Notifications", href: "/settings/notifications", icon: Bell },
+		{
+			id: "notifications",
+			label: "Notifications",
+			href: "/settings/notifications",
+			icon: Bell
+		},
 		{ id: "knots", label: "Knots", href: "/settings/knots", icon: Volleyball },
 		{ id: "spindles", label: "Spindles", href: "/settings/spindles", icon: Spool },
 		{ id: "sites", label: "Sites", href: "/settings/sites", icon: Globe }
@@ -34,7 +40,16 @@
 <div class="flex w-full flex-col items-center md:px-4 md:pt-16 md:pb-32">
 	<div class="flex w-full max-w-300 flex-col">
 		<SettingsPanel {items} {active}>
-			{@render children()}
+			<!-- travel is vertical to follow the sidebar's plate, and the flex column has to
+			     live on the region itself or the sections inside lose their gap -->
+			<TabContent
+				tabs={items}
+				{active}
+				vertical
+				class="flex w-full min-w-0 flex-col gap-6 md:gap-8"
+			>
+				{@render children()}
+			</TabContent>
 		</SettingsPanel>
 	</div>
 </div>