From 30911c8a7bf28f5b831c30d720b0d9fd59dfee72 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Fri, 31 Jul 2026 12:23:25 +0200
Subject: [PATCH] web/settings: add the mobile user and repository settings
 screens

below md the sidebar collapses into a native select and the panel goes
full-bleed, keeping only its top and bottom hairlines, matching the Mobile
section of the settings redesign.

below sm the rows drop their trailing controls onto a second line: list
entries keep theirs left-aligned under the meta, while SettingsRow and the
SettingsBlock header align theirs right, as the user and repository frames
respectively do. SettingsRow takes an opt-in `stack` since the design keeps
short label/toggle pairs on one line either way.

Signed-off-by: eti <eti@eti.tf>
---
 .../components/settings/SettingsBlock.svelte  |   9 +-
 .../components/settings/SettingsEntry.svelte  |   8 +-
 .../settings/SettingsNav.stories.svelte       |  10 ++
 .../components/settings/SettingsNav.svelte    |  42 ++++++-
 .../settings/SettingsPanel.stories.svelte     | 118 ++++++++++++++++++
 .../components/settings/SettingsPanel.svelte  |  26 ++++
 .../components/settings/SettingsRow.svelte    |  33 ++++-
 .../components/settings/ThemePicker.svelte    |   4 +-
 .../settings/tabs/ProfileTab.svelte           |  27 ++--
 .../[handle]/[repo]/settings/+layout.svelte   |  15 +--
 .../[handle]/[repo]/settings/+page.svelte     |  20 +--
 .../[repo]/settings/access/+page.svelte       |   2 +-
 .../[repo]/settings/hooks/+page.svelte        |   9 +-
 .../[repo]/settings/pipelines/+page.svelte    |   6 +-
 .../[repo]/settings/sites/+page.svelte        |  11 +-
 web/src/routes/settings/+layout.svelte        |  17 ++-
 16 files changed, 295 insertions(+), 62 deletions(-)
 create mode 100644 web/src/lib/components/settings/SettingsPanel.stories.svelte
 create mode 100644 web/src/lib/components/settings/SettingsPanel.svelte

diff --git a/web/src/lib/components/settings/SettingsBlock.svelte b/web/src/lib/components/settings/SettingsBlock.svelte
index 8fd02395..137278c5 100644
--- a/web/src/lib/components/settings/SettingsBlock.svelte
+++ b/web/src/lib/components/settings/SettingsBlock.svelte
@@ -30,8 +30,9 @@
 
 <div class="flex w-full flex-col gap-4">
 	{#if title || lines.length > 0 || action}
-		<!-- the action sits on the last line of the description, not its middle -->
-		<div class="flex w-full items-end justify-between gap-16">
+		<!-- the action sits on the last line of the description, not its middle — until
+		     the description needs the whole phone width, where it drops below instead -->
+		<div class="flex w-full flex-col gap-2 sm:flex-row sm:items-end sm:justify-between sm:gap-16">
 			<div class="flex min-w-0 flex-col">
 				{#if title}
 					<span
@@ -47,7 +48,9 @@
 				{/each}
 			</div>
 			{#if action}
-				<div class="flex shrink-0 items-center gap-2">{@render action()}</div>
+				<div class="flex shrink-0 items-center gap-2 self-end sm:self-auto">
+					{@render action()}
+				</div>
 			{/if}
 		</div>
 	{/if}
diff --git a/web/src/lib/components/settings/SettingsEntry.svelte b/web/src/lib/components/settings/SettingsEntry.svelte
index dfcae249..b2d28c41 100644
--- a/web/src/lib/components/settings/SettingsEntry.svelte
+++ b/web/src/lib/components/settings/SettingsEntry.svelte
@@ -18,7 +18,11 @@
 	const Glyph = $derived(icon);
 </script>
 
-<div class="flex min-h-8 w-full items-center justify-between gap-4">
+<!-- The meta lines — fingerprints, URLs — need the full width of a phone, so the
+     trailing buttons drop under them and stay left-aligned with the title. -->
+<div
+	class="flex min-h-8 w-full flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4"
+>
 	<div class="flex min-w-0 flex-col gap-1">
 		<div class="flex items-center gap-2">
 			{#if Glyph}
@@ -34,6 +38,6 @@
 		{/if}
 	</div>
 	{#if actions}
-		<div class="flex shrink-0 items-center gap-2">{@render actions()}</div>
+		<div class="flex shrink-0 items-center gap-2 self-start sm:self-auto">{@render actions()}</div>
 	{/if}
 </div>
diff --git a/web/src/lib/components/settings/SettingsNav.stories.svelte b/web/src/lib/components/settings/SettingsNav.stories.svelte
index 961fc407..0df41a86 100644
--- a/web/src/lib/components/settings/SettingsNav.stories.svelte
+++ b/web/src/lib/components/settings/SettingsNav.stories.svelte
@@ -45,6 +45,16 @@
 	{/snippet}
 </Story>
 
+<!-- the sidebar is a md-and-up shape: narrow the browser under 768px and this story
+     renders the select it collapses into instead -->
+<Story name="Collapsed">
+	{#snippet template(args)}
+		<div class="flex w-[378px] items-stretch">
+			<SettingsNav {...args} active="keys" />
+		</div>
+	{/snippet}
+</Story>
+
 <Story name="No icons" args={{ items: items.map(({ id, label, href }) => ({ id, label, href })) }}>
 	{#snippet template(args)}
 		<div class="flex h-[568px] w-44 items-stretch">
diff --git a/web/src/lib/components/settings/SettingsNav.svelte b/web/src/lib/components/settings/SettingsNav.svelte
index 4326760a..38a2e4fd 100644
--- a/web/src/lib/components/settings/SettingsNav.svelte
+++ b/web/src/lib/components/settings/SettingsNav.svelte
@@ -11,7 +11,9 @@
 </script>
 
 <script lang="ts">
+	import { goto } from "$app/navigation";
 	import { resolve } from "$app/paths";
+	import ChevronDown from "$icon/chevron-down";
 
 	interface Props {
 		items: SettingsNavItem[];
@@ -21,6 +23,13 @@
 
 	let { items, active, label = "Settings" }: Props = $props();
 
+	const ActiveGlyph = $derived(items.find((i) => i.id === active)?.icon);
+
+	const jump = (event: Event) => {
+		const item = items.find((i) => i.id === (event.currentTarget as HTMLSelectElement).value);
+		if (item) void goto(resolve(item.href as "/"));
+	};
+
 	// Figma DS "Navigation / Button" (1009:2662) has four states across Active ×
 	// Hovered. Inactive/resting is the only one with no fill and no border, so the
 	// hover borders have to be added rather than recoloured — otherwise the item
@@ -37,8 +46,39 @@
 		].join(" ");
 </script>
 
+<!-- Below md the panel is only as wide as the phone, so the sidebar collapses into
+     a native picker rather than seven rows that push the page content off-screen.
+     The hairline under it stands in for the sidebar's edge. -->
+<div class="flex w-full flex-col gap-4 md:hidden">
+	<div class="relative w-full">
+		{#if ActiveGlyph}
+			<ActiveGlyph
+				class="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 text-foreground-default"
+				aria-hidden="true"
+			/>
+		{/if}
+		<select
+			aria-label={label}
+			value={active}
+			onchange={jump}
+			class="h-8 w-full appearance-none rounded-sm border border-border-default bg-background-default pr-8 typography-paragraph-regular text-foreground-default outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus {ActiveGlyph
+				? 'pl-7'
+				: 'pl-2'}"
+		>
+			{#each items as item (item.id)}
+				<option value={item.id}>{item.label}</option>
+			{/each}
+		</select>
+		<ChevronDown
+			class="pointer-events-none absolute top-1/2 right-2 size-3.5 -translate-y-1/2 text-foreground-default"
+			aria-hidden="true"
+		/>
+	</div>
+	<hr class="w-full border-0 border-t border-border-default" />
+</div>
+
 <nav
-	class="flex w-full shrink-0 flex-col gap-1 border-b border-border-default bg-background-navigation-frame p-2 md:w-44 md:self-stretch md:border-r md:border-b-0"
+	class="hidden w-full shrink-0 flex-col gap-1 bg-background-navigation-frame p-2 md:flex md:w-44 md:self-stretch md:border-r md:border-border-default"
 	aria-label={label}
 >
 	{#each items as item (item.id)}
diff --git a/web/src/lib/components/settings/SettingsPanel.stories.svelte b/web/src/lib/components/settings/SettingsPanel.stories.svelte
new file mode 100644
index 00000000..9d353f9c
--- /dev/null
+++ b/web/src/lib/components/settings/SettingsPanel.stories.svelte
@@ -0,0 +1,118 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import SettingsPanel from "./SettingsPanel.svelte";
+	import SettingsHeader from "./SettingsHeader.svelte";
+	import SettingsSection from "./SettingsSection.svelte";
+	import SettingsBlock from "./SettingsBlock.svelte";
+	import SettingsList from "./SettingsList.svelte";
+	import SettingsRow from "./SettingsRow.svelte";
+	import SettingsEntry from "./SettingsEntry.svelte";
+	import SettingsToolbar from "./SettingsToolbar.svelte";
+	import CodeChip from "./CodeChip.svelte";
+	import type { SettingsNavItem } from "./SettingsNav.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
+	import Toggle from "$lib/components/ui/Toggle.svelte";
+	import User from "$icon/user-round";
+	import Key from "$icon/key";
+	import Mail from "$icon/mail";
+	import SlidersHorizontal from "$icon/sliders-horizontal";
+	import UsersRound from "$icon/users-round";
+	import Plus from "$icon/plus";
+	import Trash from "$icon/trash-2";
+	import UserRoundPlus from "$icon/user-round-plus";
+	import UserRoundMinus from "$icon/user-round-minus";
+
+	const userItems: SettingsNavItem[] = [
+		{ 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 }
+	];
+
+	const repoItems: SettingsNavItem[] = [
+		{ id: "general", label: "General", href: "/settings", icon: SlidersHorizontal },
+		{ id: "access", label: "Access", href: "/settings/access", icon: UsersRound }
+	];
+
+	const { Story } = defineMeta({
+		title: "Settings/SettingsPanel",
+		component: SettingsPanel,
+		tags: ["autodocs"],
+		parameters: { layout: "fullscreen" }
+	});
+</script>
+
+<!-- Narrow the browser under 768px to see the nav collapse into its select and the
+     panel go full-bleed; under 640px the rows drop their controls onto a second line. -->
+<Story name="User settings">
+	<SettingsPanel items={userItems} active="keys">
+		<SettingsHeader
+			title="Keys"
+			description="SSH public keys added here will be broadcasted to knots that you are a member of."
+		/>
+		<div class="flex w-full flex-col gap-4">
+			<SettingsToolbar>
+				{#snippet end()}
+					<Button icon={Plus}>Add key</Button>
+				{/snippet}
+			</SettingsToolbar>
+			<SettingsList>
+				<SettingsEntry icon={Key} title="laptop">
+					{#snippet meta()}
+						<span class="font-mono typography-monospace-regular break-all text-foreground-muted">
+							SHA256:68LweWe1t0oBuxOD8CpUyhjxGzBiylRDTNVD8WMVKfg=
+						</span>
+					{/snippet}
+					{#snippet actions()}
+						<Button variant="danger" icon={Trash}>Delete</Button>
+					{/snippet}
+				</SettingsEntry>
+			</SettingsList>
+		</div>
+		<SettingsSection title="Account">
+			<SettingsRow title="Bio" stack>
+				<Input placeholder="Write a bio" class="w-full sm:w-80" />
+			</SettingsRow>
+			<SettingsRow title="Decentralized Identifier (DID)" stack>
+				<CodeChip class="w-full break-all sm:w-auto">did:plc:rhcxsdhvxax7ezkq6zbunls2</CodeChip>
+			</SettingsRow>
+			<SettingsRow title="Hide mine">
+				<Toggle aria-label="Hide mine" />
+			</SettingsRow>
+		</SettingsSection>
+	</SettingsPanel>
+</Story>
+
+<Story name="Repository settings">
+	<SettingsPanel items={repoItems} active="access" label="Repository settings">
+		<SettingsHeader title="Access" />
+		<SettingsBlock
+			title="Collaborators"
+			description="Any user added as a collaborator will be able to push commits and tags to this repository."
+			separator
+		>
+			{#snippet action()}
+				<Button icon={UserRoundPlus}>Add collaborator</Button>
+			{/snippet}
+			<SettingsList gap="3">
+				<SettingsRow stack>
+					{#snippet label()}
+						<span class="flex min-w-0 items-center gap-2">
+							<span class="typography-paragraph-regular text-foreground-default">user.tld</span>
+							<span class="typography-paragraph-regular text-foreground-muted">Owner</span>
+						</span>
+					{/snippet}
+				</SettingsRow>
+				<SettingsRow stack>
+					{#snippet label()}
+						<span class="flex min-w-0 items-center gap-2">
+							<span class="typography-paragraph-regular text-foreground-default">user2.tld</span>
+							<span class="typography-paragraph-regular text-foreground-muted">Collaborator</span>
+						</span>
+					{/snippet}
+					<Button icon={UserRoundMinus}>Remove collaborator</Button>
+				</SettingsRow>
+			</SettingsList>
+		</SettingsBlock>
+	</SettingsPanel>
+</Story>
diff --git a/web/src/lib/components/settings/SettingsPanel.svelte b/web/src/lib/components/settings/SettingsPanel.svelte
new file mode 100644
index 00000000..92170ce9
--- /dev/null
+++ b/web/src/lib/components/settings/SettingsPanel.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import SettingsNav, { type SettingsNavItem } from "./SettingsNav.svelte";
+
+	interface Props {
+		items: SettingsNavItem[];
+		active: string;
+		label?: string;
+		children: Snippet;
+	}
+
+	let { items, active, label, children }: Props = $props();
+</script>
+
+<!-- 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. -->
+<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-[600px] md:flex-row md:items-start md:overflow-hidden md:rounded-sm md:border md:p-0"
+>
+	<SettingsNav {items} {active} {label} />
+
+	<div class="flex min-w-0 flex-1 flex-col gap-6 md:gap-8 md:px-4 md:py-6">
+		{@render children()}
+	</div>
+</div>
diff --git a/web/src/lib/components/settings/SettingsRow.svelte b/web/src/lib/components/settings/SettingsRow.svelte
index 74bb6d9a..033dda74 100644
--- a/web/src/lib/components/settings/SettingsRow.svelte
+++ b/web/src/lib/components/settings/SettingsRow.svelte
@@ -14,6 +14,12 @@
 		children?: Snippet;
 		/** top-align the control instead of centring it, for tall right-hand content */
 		align?: "center" | "start";
+		/**
+		 * drop the trailing controls onto their own line below sm. Set it wherever the
+		 * design does: rows carrying a 320px field, a long identifier, or a labelled
+		 * button next to a wide leading block. Short label/toggle pairs stay on one line.
+		 */
+		stack?: boolean;
 		class?: string;
 	}
 
@@ -24,9 +30,20 @@
 		label,
 		children,
 		align = "center",
+		stack = false,
 		class: className
 	}: Props = $props();
 
+	const alignClass = $derived(
+		align === "start"
+			? stack
+				? "sm:items-start"
+				: "items-start"
+			: stack
+				? "sm:items-center"
+				: "items-center"
+	);
+
 	const Glyph = $derived(icon);
 	const lines = $derived(
 		description === undefined ? [] : Array.isArray(description) ? description : [description]
@@ -34,9 +51,9 @@
 </script>
 
 <div
-	class="flex min-h-8 w-full justify-between gap-4 {align === 'start'
-		? 'items-start'
-		: 'items-center'} {className ?? ''}"
+	class="flex min-h-8 w-full justify-between {stack
+		? 'flex-col gap-2 sm:flex-row sm:gap-4'
+		: 'gap-4'} {alignClass} {className ?? ''}"
 >
 	{#if label}
 		{@render label()}
@@ -54,6 +71,14 @@
 		</span>
 	{/if}
 	{#if children}
-		<div class="flex shrink-0 items-center gap-2">{@render children()}</div>
+		<!-- stacked, the controls take the full line and align right; a field that wants
+		     the whole width says so with `w-full sm:w-80` and fills it instead -->
+		<div
+			class="flex items-center gap-2 {stack
+				? 'w-full justify-end sm:w-auto sm:shrink-0'
+				: 'shrink-0'}"
+		>
+			{@render children()}
+		</div>
 	{/if}
 </div>
diff --git a/web/src/lib/components/settings/ThemePicker.svelte b/web/src/lib/components/settings/ThemePicker.svelte
index 6104fe59..2f0d18c5 100644
--- a/web/src/lib/components/settings/ThemePicker.svelte
+++ b/web/src/lib/components/settings/ThemePicker.svelte
@@ -12,7 +12,9 @@
 	const name = $props.id();
 </script>
 
-<div class="flex gap-4">
+<!-- three 135px thumbnails need 437px, so on a phone they wrap two-up and Dark
+     drops onto a second line -->
+<div class="flex w-full flex-wrap gap-4 sm:w-auto">
 	<label class="flex w-[135px] cursor-pointer flex-col gap-2">
 		<!-- Auto is the one thumbnail that tracks the live theme, since that is
 		     exactly what the option does -->
diff --git a/web/src/lib/components/settings/tabs/ProfileTab.svelte b/web/src/lib/components/settings/tabs/ProfileTab.svelte
index e9061f2c..6f9eb6f7 100644
--- a/web/src/lib/components/settings/tabs/ProfileTab.svelte
+++ b/web/src/lib/components/settings/tabs/ProfileTab.svelte
@@ -73,27 +73,27 @@
 			<Avatar did={user?.did} handle={user?.handle} size="size-[158px]" />
 			<Button icon={Pencil} href="/settings/profile/avatar">Edit</Button>
 		</div>
-		<SettingsRow title="Bio">
-			<Input bind:value={form.bio} placeholder="Write a bio" class="w-80" />
+		<SettingsRow title="Bio" stack>
+			<Input bind:value={form.bio} placeholder="Write a bio" class="w-full sm:w-80" />
 		</SettingsRow>
-		<SettingsRow title="Pronouns">
-			<Input bind:value={form.pronouns} placeholder="they/them" class="w-80" />
+		<SettingsRow title="Pronouns" stack>
+			<Input bind:value={form.pronouns} placeholder="they/them" class="w-full sm:w-80" />
 		</SettingsRow>
-		<SettingsRow title="Location">
-			<Input bind:value={form.location} placeholder="Anywhere" class="w-80" />
+		<SettingsRow title="Location" stack>
+			<Input bind:value={form.location} placeholder="Anywhere" class="w-full sm:w-80" />
 		</SettingsRow>
 		<SettingsRow title="Link to Bluesky account">
 			<Toggle bind:checked={form.bluesky} aria-label="Link to Bluesky account" />
 		</SettingsRow>
-		<SettingsRow title="Social links" class="!items-start">
-			<div class="flex w-80 flex-col gap-2">
+		<SettingsRow title="Social links" align="start" stack>
+			<div class="flex w-full flex-col gap-2 sm:w-80">
 				{#each form.links.keys() as i (i)}
 					<Input bind:value={form.links[i]} placeholder="Social link" />
 				{/each}
 			</div>
 		</SettingsRow>
-		<SettingsRow title="Vanity stats" class="!items-start">
-			<div class="flex w-80 flex-col gap-2">
+		<SettingsRow title="Vanity stats" align="start" stack>
+			<div class="flex w-full flex-col gap-2 sm:w-80">
 				{#each form.stats.keys() as i (i)}
 					<Select bind:value={form.stats[i]} aria-label="Vanity stat {i + 1}">
 						<option value="">Choose stat</option>
@@ -111,8 +111,9 @@
 			<CodeChip>{user?.handle ?? "…"}</CodeChip>
 			<Button variant="ghost" href="/settings/profile/handle">Change</Button>
 		</SettingsRow>
-		<SettingsRow title="Decentralized Identifier (DID)">
-			<CodeChip class="break-all">{user?.did ?? "…"}</CodeChip>
+		<!-- a DID is too long to sit beside its label on a phone; a PDS hostname is not -->
+		<SettingsRow title="Decentralized Identifier (DID)" stack>
+			<CodeChip class="w-full break-all sm:w-auto">{user?.did ?? "…"}</CodeChip>
 		</SettingsRow>
 		<SettingsRow title="Personal Data Server (PDS)">
 			<CodeChip class="break-all">{pds ?? "…"}</CodeChip>
@@ -120,7 +121,7 @@
 	</SettingsSection>
 
 	<SettingsSection title="Interface">
-		<SettingsRow title="Theme">
+		<SettingsRow title="Theme" align="start" stack>
 			<ThemePicker bind:value={form.theme} />
 		</SettingsRow>
 	</SettingsSection>
diff --git a/web/src/routes/[handle]/[repo]/settings/+layout.svelte b/web/src/routes/[handle]/[repo]/settings/+layout.svelte
index 979bf018..fb2e78dc 100644
--- a/web/src/routes/[handle]/[repo]/settings/+layout.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { page } from "$app/state";
-	import SettingsNav, { type SettingsNavItem } from "$lib/components/settings/SettingsNav.svelte";
+	import type { SettingsNavItem } from "$lib/components/settings/SettingsNav.svelte";
+	import SettingsPanel from "$lib/components/settings/SettingsPanel.svelte";
 	import SlidersHorizontal from "$icon/sliders-horizontal";
 	import UsersRound from "$icon/users-round";
 	import Layers from "$icon/layers";
@@ -25,12 +26,6 @@
 	const active = $derived(items.some((i) => i.id === segment) ? segment : "general");
 </script>
 
-<div
-	class="flex min-h-[600px] w-full flex-col items-stretch gap-4 overflow-hidden rounded-sm border border-border-default bg-background-default md:flex-row md:items-start"
->
-	<SettingsNav {items} {active} label="Repository settings" />
-
-	<div class="flex min-w-0 flex-1 flex-col gap-8 px-4 py-6">
-		{@render children()}
-	</div>
-</div>
+<SettingsPanel {items} {active} label="Repository settings">
+	{@render children()}
+</SettingsPanel>
diff --git a/web/src/routes/[handle]/[repo]/settings/+page.svelte b/web/src/routes/[handle]/[repo]/settings/+page.svelte
index 008ce5ef..7f4c3d51 100644
--- a/web/src/routes/[handle]/[repo]/settings/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/+page.svelte
@@ -77,18 +77,22 @@
 	<!-- the leading pair of cards carries no heading in the design -->
 	<div class="flex w-full flex-col gap-4">
 		<SettingsList gap="3">
-			<SettingsRow title="Description">
+			<SettingsRow title="Description" stack>
 				<Input
 					bind:value={form.description}
 					placeholder="What this project is about"
-					class="w-80"
+					class="w-full sm:w-80"
 				/>
 			</SettingsRow>
-			<SettingsRow title="Website">
-				<Input bind:value={form.website} placeholder="URL" class="w-80" />
+			<SettingsRow title="Website" stack>
+				<Input bind:value={form.website} placeholder="URL" class="w-full sm:w-80" />
 			</SettingsRow>
-			<SettingsRow title="Topics" description="List of topics separated by spaces.">
-				<Input bind:value={form.topics} placeholder="infra, social, decentralized" class="w-80" />
+			<SettingsRow title="Topics" description="List of topics separated by spaces." stack>
+				<Input
+					bind:value={form.topics}
+					placeholder="infra, social, decentralized"
+					class="w-full sm:w-80"
+				/>
 			</SettingsRow>
 		</SettingsList>
 
@@ -98,8 +102,9 @@
 				description={[
 					'The default branch is considered the "base" branch in your repository, against which all pull requests and code commits are automatically made, unless you specify a different branch.'
 				]}
+				stack
 			>
-				<Select bind:value={form.defaultBranch} aria-label="Default branch" class="w-80">
+				<Select bind:value={form.defaultBranch} aria-label="Default branch" class="w-full sm:w-80">
 					{#each branches as branch (branch)}
 						<option value={branch}>{branch}</option>
 					{/each}
@@ -166,6 +171,7 @@
 		<SettingsRow
 			title="Delete"
 			description="Deleting a repository is irreversible and permanent. Be certain before deleting a repository."
+			stack
 		>
 			<Button variant="danger" icon={Trash}>Delete repository</Button>
 		</SettingsRow>
diff --git a/web/src/routes/[handle]/[repo]/settings/access/+page.svelte b/web/src/routes/[handle]/[repo]/settings/access/+page.svelte
index 90a42a42..46db283e 100644
--- a/web/src/routes/[handle]/[repo]/settings/access/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/access/+page.svelte
@@ -48,7 +48,7 @@
 
 	<SettingsList gap="3">
 		{#each collaborators as person (person.handle)}
-			<SettingsRow>
+			<SettingsRow stack>
 				{#snippet label()}
 					<span class="flex min-w-0 items-center gap-2">
 						<Avatar did={person.did} handle={person.handle} size="size-5" />
diff --git a/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte b/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
index af0dfd29..1c788d8b 100644
--- a/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
@@ -64,8 +64,9 @@
 		<SettingsList gap="3">
 			{#each hooks as hook (hook.id)}
 				<!-- the toggle rides the top-right corner while the actions sit under it,
-				     so this row is a two-column block rather than a SettingsRow -->
-				<div class="flex w-full items-start justify-between gap-4">
+				     so this row is a two-column block rather than a SettingsRow. On a
+				     phone the two columns stack and the actions spread across the width. -->
+				<div class="flex w-full flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
 					<div class="flex min-w-0 flex-col gap-1">
 						<CodeChip class="w-fit break-all">{hook.url}</CodeChip>
 						<span
@@ -82,9 +83,9 @@
 							{hook.by}
 						</span>
 					</div>
-					<div class="flex shrink-0 flex-col items-end gap-4">
+					<div class="flex flex-col items-end gap-4 sm:shrink-0">
 						<Toggle bind:checked={hook.enabled} aria-label="Enable {hook.url}" />
-						<div class="flex items-center gap-2">
+						<div class="flex w-full items-center justify-between gap-2 sm:w-auto sm:justify-end">
 							<Button icon={Inbox}>Deliveries</Button>
 							<Button icon={Pencil}>Edit</Button>
 							<Button variant="danger" icon={Trash} onclick={() => remove(hook.id)}>Delete</Button>
diff --git a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
index e6cb2013..1eaa8db5 100644
--- a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
@@ -50,8 +50,8 @@
 	{/snippet}
 
 	<SettingsList gap="3">
-		<SettingsRow title="Spindle">
-			<Select bind:value={spindle} aria-label="Spindle" class="w-80">
+		<SettingsRow title="Spindle" stack>
+			<Select bind:value={spindle} aria-label="Spindle" class="w-full sm:w-80">
 				{#each spindles as option (option)}
 					<option value={option}>{option}</option>
 				{/each}
@@ -74,7 +74,7 @@
 
 	<SettingsList gap="3">
 		{#each secrets as secret (secret.name)}
-			<SettingsRow>
+			<SettingsRow stack>
 				{#snippet label()}
 					<span class="flex min-w-0 flex-col gap-1">
 						<span class="font-mono typography-monospace-regular break-all text-foreground-default">
diff --git a/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte b/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
index c94a462d..d84f2a34 100644
--- a/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
@@ -69,8 +69,8 @@
 </div>
 
 <SettingsList gap="3">
-	<SettingsRow title="Branch" description="The branch to build and deploy the site from.">
-		<Select bind:value={form.branch} aria-label="Branch" class="w-80">
+	<SettingsRow title="Branch" description="The branch to build and deploy the site from." stack>
+		<Select bind:value={form.branch} aria-label="Branch" class="w-full sm:w-80">
 			{#each branches as branch (branch.value)}
 				<option value={branch.value}>{branch.label}</option>
 			{/each}
@@ -83,8 +83,9 @@
 			"Path within the repository that contains your index.html.",
 			"Use / for the root, or a subdirectory like /docs."
 		]}
+		stack
 	>
-		<Input bind:value={form.directory} placeholder="/" class="w-80" />
+		<Input bind:value={form.directory} placeholder="/" class="w-full sm:w-80" />
 	</SettingsRow>
 
 	<SettingsRow
@@ -93,8 +94,10 @@
 			"An index site is served at the root of your sites domain.",
 			"A sub-path site is served under the repository name."
 		]}
+		align="start"
+		stack
 	>
-		<div class="flex w-80 flex-col gap-2">
+		<div class="flex w-full flex-col gap-2 sm:w-80">
 			<div class="flex flex-col gap-1">
 				<Radio value="index" bind:group={form.type} name="site-type">Index site</Radio>
 				<CodeChip class="w-fit">{domain}</CodeChip>
diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte
index 1e8a07e7..5d248733 100644
--- a/web/src/routes/settings/+layout.svelte
+++ b/web/src/routes/settings/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { page } from "$app/state";
-	import SettingsNav, { type SettingsNavItem } from "$lib/components/settings/SettingsNav.svelte";
+	import type { SettingsNavItem } from "$lib/components/settings/SettingsNav.svelte";
+	import SettingsPanel from "$lib/components/settings/SettingsPanel.svelte";
 	import User from "$icon/user-round";
 	import Key from "$icon/key";
 	import Mail from "$icon/mail";
@@ -30,14 +31,12 @@
 	<title>Settings &middot; Tangled</title>
 </svelte:head>
 
-<div class="flex w-full flex-col items-center px-4 pt-16 pb-32">
-	<div
-		class="flex min-h-[600px] w-full max-w-[1200px] flex-col items-stretch gap-4 overflow-hidden rounded-sm border border-border-default bg-background-default md:flex-row md:items-start"
-	>
-		<SettingsNav {items} {active} />
-
-		<div class="flex min-w-0 flex-1 flex-col gap-8 px-4 py-6">
+<!-- the panel runs edge to edge on a phone, so the page gutters and the generous
+     desktop breathing room only kick in from md up -->
+<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-[1200px] flex-col">
+		<SettingsPanel {items} {active}>
 			{@render children()}
-		</div>
+		</SettingsPanel>
 	</div>
 </div>
-- 
2.51.2