From 080ee132cb20fa27fdce5a9d8564a0bc14539fbb Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 5 Aug 2026 10:30:23 +0300
Subject: [PATCH] =?UTF-8?q?web/components:=20use=20proper=20size=20naming?=
 =?UTF-8?q?=20convention=20(sm=20=E2=9E=9D=20small,=20...)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: eti <eti@eti.tf>
---
 .../lib/components/profile/FollowCard.svelte  |  2 +-
 web/src/lib/components/repo/BlobHeader.svelte |  8 +--
 web/src/lib/components/repo/BranchList.svelte |  2 +-
 .../lib/components/repo/DiffFileCard.svelte   |  2 +-
 web/src/lib/components/repo/DiffTopbar.svelte | 12 ++---
 web/src/lib/components/repo/RepoCard.svelte   |  2 +-
 web/src/lib/components/repo/RepoHeader.svelte |  6 +--
 web/src/lib/components/repo/StarButton.svelte |  4 +-
 .../components/repo/issues/IssueCard.svelte   |  2 +-
 .../components/repo/issues/IssueSearch.svelte |  2 +-
 .../repo/issues/IssueToolbar.svelte           |  6 +--
 .../repo/pipelines/PipelineCard.svelte        |  2 +-
 .../repo/pipelines/PipelineCardContent.svelte |  2 +-
 .../repo/pipelines/PipelineSearch.svelte      |  2 +-
 .../repo/pipelines/PipelineToolbar.svelte     | 11 ++--
 .../repo/pipelines/PipelineWorkflows.svelte   | 50 +++++++++++++++----
 .../components/settings/SettingsList.svelte   |  8 +--
 .../components/settings/tabs/EmailsTab.svelte |  4 +-
 .../components/settings/tabs/KnotsTab.svelte  |  4 +-
 .../components/settings/tabs/SitesTab.svelte  |  2 +-
 .../settings/tabs/SpindlesTab.svelte          |  4 +-
 web/src/lib/components/shell/Topbar.svelte    |  8 +--
 .../lib/components/shell/TopbarSearch.svelte  |  2 +-
 .../lib/components/ui/Button.stories.svelte   | 16 +++---
 web/src/lib/components/ui/Button.svelte       | 14 +++---
 web/src/lib/components/ui/Card.stories.svelte |  4 +-
 web/src/lib/components/ui/Card.svelte         |  8 +--
 .../components/ui/ColorBall.stories.svelte    | 10 ++--
 web/src/lib/components/ui/ColorBall.svelte    | 11 ++--
 .../lib/components/ui/Dropdown.stories.svelte |  6 +--
 web/src/lib/components/ui/Dropdown.svelte     |  4 +-
 .../lib/components/ui/Input.stories.svelte    | 18 +++----
 web/src/lib/components/ui/Input.svelte        | 20 ++++----
 .../lib/components/ui/MarkdownEditor.svelte   |  4 +-
 web/src/lib/components/ui/Tag.svelte          | 10 ++--
 web/src/lib/components/ui/Textarea.svelte     | 12 ++---
 .../lib/components/welcome/KeysStep.svelte    |  2 +-
 .../[repo]/settings/access/new/+page.svelte   |  2 +-
 .../[repo]/settings/hooks/new/+page.svelte    |  2 +-
 .../[repo]/settings/labels/new/+page.svelte   |  2 +-
 .../pipelines/secrets/new/+page.svelte        |  2 +-
 .../[repo]/settings/rename/+page.svelte       |  2 +-
 .../[repo]/settings/sites/+page.svelte        |  4 +-
 web/src/routes/login/+page.svelte             |  2 +-
 .../routes/settings/emails/new/+page.svelte   |  2 +-
 web/src/routes/settings/keys/new/+page.svelte |  2 +-
 .../routes/settings/knots/new/+page.svelte    |  2 +-
 .../settings/profile/avatar/+page.svelte      |  2 +-
 .../settings/profile/deactivate/+page.svelte  |  2 +-
 .../settings/profile/delete/+page.svelte      |  2 +-
 .../settings/profile/handle/+page.svelte      |  2 +-
 .../settings/profile/password/+page.svelte    |  2 +-
 .../routes/settings/spindles/new/+page.svelte |  2 +-
 53 files changed, 177 insertions(+), 143 deletions(-)

diff --git a/web/src/lib/components/profile/FollowCard.svelte b/web/src/lib/components/profile/FollowCard.svelte
index b3bec5ff3..341e129ad 100644
--- a/web/src/lib/components/profile/FollowCard.svelte
+++ b/web/src/lib/components/profile/FollowCard.svelte
@@ -16,6 +16,6 @@
 	} = $props();
 </script>
 
-<Card {border} {shadow} {background} padding={border || background ? "default" : "none"}>
+<Card {border} {shadow} {background} padding={border || background ? "regular" : "none"}>
 	<FollowCardContent {person} />
 </Card>
diff --git a/web/src/lib/components/repo/BlobHeader.svelte b/web/src/lib/components/repo/BlobHeader.svelte
index b7b83b416..6f650ecc5 100644
--- a/web/src/lib/components/repo/BlobHeader.svelte
+++ b/web/src/lib/components/repo/BlobHeader.svelte
@@ -92,14 +92,14 @@
 		{#if kind !== "submodule"}
 			<ButtonGroup>
 				{#if hasRenderedView(kind)}
-					<Button size="sm" onclick={() => (view = view === "code" ? "rendered" : "code")}>
+					<Button size="small" onclick={() => (view = view === "code" ? "rendered" : "code")}>
 						View {view === "rendered" ? "code" : "rendered"}
 					</Button>
 				{/if}
-				<Button size="sm" href={rawHref}>View raw</Button>
+				<Button size="small" href={rawHref}>View raw</Button>
 				{#if copyText !== null}
 					<Button
-						size="sm"
+						size="small"
 						onclick={copyContents}
 						title="Copy contents"
 						aria-label="Copy contents"
@@ -107,7 +107,7 @@
 					/>
 				{/if}
 				<Button
-					size="sm"
+					size="small"
 					href={rawHref}
 					download={fileName}
 					title="Download"
diff --git a/web/src/lib/components/repo/BranchList.svelte b/web/src/lib/components/repo/BranchList.svelte
index 73e597a02..3c3738531 100644
--- a/web/src/lib/components/repo/BranchList.svelte
+++ b/web/src/lib/components/repo/BranchList.svelte
@@ -44,7 +44,7 @@
 			{#if branch.name !== currentRef}
 				<Button
 					variant="ghost"
-					size="sm"
+					size="small"
 					icon={GitCompare}
 					href={resolve(
 						`${base}/compare/${encodeURIComponent(currentRef)}...${encodeURIComponent(branch.name)}` as "/"
diff --git a/web/src/lib/components/repo/DiffFileCard.svelte b/web/src/lib/components/repo/DiffFileCard.svelte
index a474510fc..0d303c9b0 100644
--- a/web/src/lib/components/repo/DiffFileCard.svelte
+++ b/web/src/lib/components/repo/DiffFileCard.svelte
@@ -77,7 +77,7 @@
 					<Button
 						href={blobUrl as "/"}
 						variant="ghost"
-						size="sm"
+						size="small"
 						icon={Eye}
 						class="hidden md:inline-flex"
 						onclick={(event) => event.stopPropagation()}
diff --git a/web/src/lib/components/repo/DiffTopbar.svelte b/web/src/lib/components/repo/DiffTopbar.svelte
index 4e51a478c..9d37f9da5 100644
--- a/web/src/lib/components/repo/DiffTopbar.svelte
+++ b/web/src/lib/components/repo/DiffTopbar.svelte
@@ -49,7 +49,7 @@
 >
 	{#if onToggleFiles}
 		<Button
-			size="sm"
+			size="small"
 			icon={PanelLeft}
 			onclick={onToggleFiles}
 			aria-expanded={filesOpen}
@@ -72,10 +72,10 @@
 	{#if downloadUrls}
 		<!-- below md these crowd the topbar into page-level horizontal scroll -->
 		<ButtonGroup spaced class="hidden md:inline-flex">
-			<Button href={downloadUrls.patch as "/"} data-sveltekit-reload size="sm" icon={Download}
+			<Button href={downloadUrls.patch as "/"} data-sveltekit-reload size="small" icon={Download}
 				>.patch</Button
 			>
-			<Button href={downloadUrls.diff as "/"} data-sveltekit-reload size="sm" icon={Download}
+			<Button href={downloadUrls.diff as "/"} data-sveltekit-reload size="small" icon={Download}
 				>.diff</Button
 			>
 		</ButtonGroup>
@@ -83,7 +83,7 @@
 
 	{#if onSetAllOpen}
 		<Button
-			size="sm"
+			size="small"
 			icon={allOpen ? FoldVertical : UnfoldVertical}
 			onclick={() => onSetAllOpen(!allOpen)}
 		>
@@ -96,7 +96,7 @@
 			href={"?diff=unified" as "/"}
 			data-sveltekit-replacestate
 			data-sveltekit-noscroll
-			size="sm"
+			size="small"
 			variant={diffStyle === "split" ? "ghost" : "default"}
 			icon={SquareSplitVertical}
 			aria-label="Unified diff"
@@ -106,7 +106,7 @@
 			href={"?diff=split" as "/"}
 			data-sveltekit-replacestate
 			data-sveltekit-noscroll
-			size="sm"
+			size="small"
 			variant={diffStyle === "split" ? "default" : "ghost"}
 			icon={SquareSplitHorizontal}
 			aria-label="Split diff"
diff --git a/web/src/lib/components/repo/RepoCard.svelte b/web/src/lib/components/repo/RepoCard.svelte
index 072074165..7caef6193 100644
--- a/web/src/lib/components/repo/RepoCard.svelte
+++ b/web/src/lib/components/repo/RepoCard.svelte
@@ -10,7 +10,7 @@
 		border = true,
 		shadow = false,
 		background = true,
-		padding = "default"
+		padding = "regular"
 	}: {
 		repo: RepoCardData;
 		starButton?: boolean;
diff --git a/web/src/lib/components/repo/RepoHeader.svelte b/web/src/lib/components/repo/RepoHeader.svelte
index 0288d8853..2c9456b94 100644
--- a/web/src/lib/components/repo/RepoHeader.svelte
+++ b/web/src/lib/components/repo/RepoHeader.svelte
@@ -40,7 +40,7 @@
 			<Button
 				href={resolve(`${base}/stars` as "/")}
 				variant="default"
-				size="sm"
+				size="small"
 				icon={Star}
 				title="Starred by"
 			>
@@ -52,14 +52,14 @@
 			<Button
 				href={resolve(`${base}/fork` as "/")}
 				variant="default"
-				size="sm"
+				size="small"
 				insetShadow={true}
 				icon={GitFork}
 				class="flex-1"
 			>
 				Fork
 			</Button>
-			<Button href={resolve(`${base}/forks` as "/")} variant="ghost" size="sm" title="Forked by">
+			<Button href={resolve(`${base}/forks` as "/")} variant="ghost" size="small" title="Forked by">
 				{counts.forks}
 			</Button>
 		</ButtonGroup>
diff --git a/web/src/lib/components/repo/StarButton.svelte b/web/src/lib/components/repo/StarButton.svelte
index e23c67e16..5eb890d69 100644
--- a/web/src/lib/components/repo/StarButton.svelte
+++ b/web/src/lib/components/repo/StarButton.svelte
@@ -69,7 +69,7 @@
 		<ButtonGroup class="w-full">
 			<Button
 				variant="default"
-				size="sm"
+				size="small"
 				{insetShadow}
 				loading={relation.loading}
 				disabled={!relation.known}
@@ -85,7 +85,7 @@
 			<Button
 				href={`/${repoOwnerHandle}/${repoName}/stars`}
 				variant="ghost"
-				size="sm"
+				size="small"
 				title="Starred by"
 			>
 				{starCount.value}
diff --git a/web/src/lib/components/repo/issues/IssueCard.svelte b/web/src/lib/components/repo/issues/IssueCard.svelte
index 51362f830..c6b571878 100644
--- a/web/src/lib/components/repo/issues/IssueCard.svelte
+++ b/web/src/lib/components/repo/issues/IssueCard.svelte
@@ -22,6 +22,6 @@
 	}: Props = $props();
 </script>
 
-<Card {border} {shadow} {background} padding="sm">
+<Card {border} {shadow} {background} padding="small">
 	<IssueCardContent {ownerHandle} {repoName} {issue} />
 </Card>
diff --git a/web/src/lib/components/repo/issues/IssueSearch.svelte b/web/src/lib/components/repo/issues/IssueSearch.svelte
index 64762404c..fd70e5749 100644
--- a/web/src/lib/components/repo/issues/IssueSearch.svelte
+++ b/web/src/lib/components/repo/issues/IssueSearch.svelte
@@ -31,7 +31,7 @@
 			<Button
 				type="button"
 				variant="ghost"
-				size="sm"
+				size="small"
 				icon={X}
 				onclick={clear}
 				aria-label="Clear search"
diff --git a/web/src/lib/components/repo/issues/IssueToolbar.svelte b/web/src/lib/components/repo/issues/IssueToolbar.svelte
index 5ca59360d..49633ce59 100644
--- a/web/src/lib/components/repo/issues/IssueToolbar.svelte
+++ b/web/src/lib/components/repo/issues/IssueToolbar.svelte
@@ -34,7 +34,7 @@
 		<Button
 			href={resolve(`${base}?state=open` as "/")}
 			{...segmentProps(state === "open")}
-			size="sm"
+			size="small"
 			icon={CircleDot}
 		>
 			<span>
@@ -45,7 +45,7 @@
 		<Button
 			href={resolve(`${base}?state=closed` as "/")}
 			{...segmentProps(state === "closed")}
-			size="sm"
+			size="small"
 			icon={CircleX}
 		>
 			<span>
@@ -59,7 +59,7 @@
 	<Button
 		href={resolve(`${base}/new` as "/")}
 		variant="primary"
-		size="sm"
+		size="small"
 		icon={Plus}
 		class="col-start-3 row-start-2 sm:row-start-1"
 	>
diff --git a/web/src/lib/components/repo/pipelines/PipelineCard.svelte b/web/src/lib/components/repo/pipelines/PipelineCard.svelte
index c56a41ff6..ee9e4f881 100644
--- a/web/src/lib/components/repo/pipelines/PipelineCard.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineCard.svelte
@@ -22,6 +22,6 @@
 	}: Props = $props();
 </script>
 
-<Card {border} {shadow} {background} padding="sm">
+<Card {border} {shadow} {background} padding="small">
 	<PipelineCardContent {ownerHandle} {repoName} {pipeline} />
 </Card>
diff --git a/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte b/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
index 7be23d6c6..3a9afb2e2 100644
--- a/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
@@ -131,7 +131,7 @@
 
 <div class={classes.meta()}>
 	<span class={classes.metaSub()}>
-		<Tag class="mt-px" size="lg" color={STATUS_TAG_COLORS[status]} icon={STATUS_ICONS[status]}
+		<Tag class="mt-px" size="large" color={STATUS_TAG_COLORS[status]} icon={STATUS_ICONS[status]}
 			>{STATUS_LABELS[status]}</Tag
 		>
 
diff --git a/web/src/lib/components/repo/pipelines/PipelineSearch.svelte b/web/src/lib/components/repo/pipelines/PipelineSearch.svelte
index b226cbdda..0e1ee9da7 100644
--- a/web/src/lib/components/repo/pipelines/PipelineSearch.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineSearch.svelte
@@ -67,7 +67,7 @@
 			<Button
 				type="button"
 				variant="ghost"
-				size="sm"
+				size="small"
 				icon={X}
 				onclick={clear}
 				aria-label="Clear search"
diff --git a/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte b/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte
index c4fd199dd..b6ac604db 100644
--- a/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte
@@ -55,11 +55,16 @@
 
 	<ButtonGroup class={classes.group()}>
 		<!-- no manual segment: the appview only filters push and pull request -->
-		<Button size="sm" href={segmentHref("all")} {...segmentProps(filter === "all")} icon={Layers2}>
+		<Button
+			size="small"
+			href={segmentHref("all")}
+			{...segmentProps(filter === "all")}
+			icon={Layers2}
+		>
 			All
 		</Button>
 		<Button
-			size="sm"
+			size="small"
 			href={segmentHref("push")}
 			{...segmentProps(filter === "push")}
 			icon={GitCommitHorizontal}
@@ -67,7 +72,7 @@
 			Push
 		</Button>
 		<Button
-			size="sm"
+			size="small"
 			href={segmentHref("pull_request")}
 			{...segmentProps(filter === "pull_request")}
 			icon={GitPullRequest}
diff --git a/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte b/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
index b608f522b..ec565ade8 100644
--- a/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
@@ -1,38 +1,56 @@
 <script module lang="ts">
-	import { tv } from "tailwind-variants";
+	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const pipelineWorkflows = tv({
 		slots: {
-			waiting: "inline-flex items-center gap-1 italic",
+			waiting: "inline-flex items-center gap-1",
 			trigger: "flex items-center gap-1 text-foreground-muted hover:underline",
 			icon: "size-3 shrink-0",
+			symbol: "",
 			// Button hugs its children, so stretch that span to get a two-column row
 			item: "[&>span]:w-full",
 			row: "flex w-full items-center justify-between gap-2",
 			name: "flex min-w-0 items-center gap-1.5",
 			label: "truncate",
 			outcome: "shrink-0 text-foreground-muted"
+		},
+		variants: {
+			variant: {
+				// "2/3 workflows" with a chevron, for a card that has room to spell it out
+				count: { waiting: "italic", symbol: "size-3" },
+				// the appview's pipelineSymbol: a status ring plus a bare tally
+				symbol: { trigger: "gap-1.5" }
+			}
+		},
+		defaultVariants: {
+			variant: "count"
 		}
 	});
+
+	export type PipelineWorkflowsVariants = VariantProps<typeof pipelineWorkflows>;
 </script>
 
 <script lang="ts">
 	import ChevronDown from "$icon/chevron-down";
-	import Hourglass from "$icon/hourglass";
 	import Dropdown from "$lib/components/ui/Dropdown.svelte";
 	import DropdownItem from "$lib/components/ui/DropdownItem.svelte";
 	import { formatDuration } from "$lib/format";
 	import type { PipelineSummary } from "$lib/components/repo/types";
-	import { finishedCount, longSummary, STATUS_LABELS } from "./pipeline";
+	import { finishedCount, longSummary, shortSummary, STATUS_LABELS } from "./pipeline";
 	import PipelineStatusIcon from "./PipelineStatusIcon.svelte";
+	import PipelineSymbol from "./PipelineSymbol.svelte";
 
 	interface Props {
 		ownerHandle: string;
 		repoName: string;
 		pipeline: PipelineSummary;
+		/** how the trigger reads: a workflow count, or a status ring plus a tally */
+		variant?: PipelineWorkflowsVariants["variant"];
+		/** symbol variant only: "2/3" against the full "2/3 passed, 1/3 failed" breakdown */
+		summary?: "short" | "long";
 	}
 
-	let { ownerHandle, repoName, pipeline }: Props = $props();
+	let { ownerHandle, repoName, pipeline, variant = "count", summary = "short" }: Props = $props();
 
 	const count = $derived(pipeline.workflows.length);
 	const finished = $derived(finishedCount(pipeline));
@@ -40,21 +58,31 @@
 	// show the ratio only while something is still running
 	const label = $derived(finished === count ? `${count} ${noun}` : `${finished}/${count} ${noun}`);
 
-	const classes = pipelineWorkflows();
+	const classes = $derived(pipelineWorkflows({ variant }));
 </script>
 
 {#if count === 0}
 	<!-- no workflows yet, so nothing to open -->
-	<span class={classes.waiting()}>
-		<Hourglass class={classes.icon()} aria-hidden="true" />
-		Waiting for a spindle…
+	<span
+		class={classes.waiting()}
+		title={variant === "symbol" ? "Waiting for a spindle" : undefined}
+	>
+		<PipelineSymbol {pipeline} class={classes.symbol()} />
+		{#if variant === "count"}
+			Waiting for a spindle…
+		{/if}
 	</span>
 {:else}
 	<Dropdown group="pipeline-workflows" align="left" menuClass="w-72" label={longSummary(pipeline)}>
 		{#snippet trigger()}
 			<span class={classes.trigger()}>
-				{label}
-				<ChevronDown class={classes.icon()} aria-hidden="true" />
+				{#if variant === "symbol"}
+					<PipelineSymbol {pipeline} class={classes.symbol()} />
+					{summary === "long" ? longSummary(pipeline) : shortSummary(pipeline)}
+				{:else}
+					{label}
+					<ChevronDown class={classes.icon()} aria-hidden="true" />
+				{/if}
 			</span>
 		{/snippet}
 
diff --git a/web/src/lib/components/settings/SettingsList.svelte b/web/src/lib/components/settings/SettingsList.svelte
index af709fc3c..951228913 100644
--- a/web/src/lib/components/settings/SettingsList.svelte
+++ b/web/src/lib/components/settings/SettingsList.svelte
@@ -10,12 +10,12 @@
 		base: "flex w-full flex-col divide-y divide-border-default rounded-sm border border-border-default py-1 *:py-2",
 		variants: {
 			padding: {
-				default: "px-4",
-				tight: "px-3"
+				regular: "px-4",
+				small: "px-3"
 			}
 		},
 		defaultVariants: {
-			padding: "default"
+			padding: "regular"
 		}
 	});
 
@@ -31,7 +31,7 @@
 		children: Snippet;
 	}
 
-	let { padding = "default", class: className, children }: Props = $props();
+	let { padding = "regular", class: className, children }: Props = $props();
 
 	const classes = $derived(settingsList({ padding, class: className }));
 </script>
diff --git a/web/src/lib/components/settings/tabs/EmailsTab.svelte b/web/src/lib/components/settings/tabs/EmailsTab.svelte
index 05adeb952..243c92a93 100644
--- a/web/src/lib/components/settings/tabs/EmailsTab.svelte
+++ b/web/src/lib/components/settings/tabs/EmailsTab.svelte
@@ -67,10 +67,10 @@
 				<SettingsEntry icon={Mail} title={email.address}>
 					{#snippet tags()}
 						{#if email.verified}
-							<Tag color="success" size="sm" icon={Check}>Verified</Tag>
+							<Tag color="success" size="small" icon={Check}>Verified</Tag>
 						{/if}
 						{#if email.primary}
-							<Tag color="info" size="sm" icon={Star}>Primary</Tag>
+							<Tag color="info" size="small" icon={Star}>Primary</Tag>
 						{/if}
 					{/snippet}
 					{#snippet meta()}
diff --git a/web/src/lib/components/settings/tabs/KnotsTab.svelte b/web/src/lib/components/settings/tabs/KnotsTab.svelte
index 3a192ddf0..907b3bb75 100644
--- a/web/src/lib/components/settings/tabs/KnotsTab.svelte
+++ b/web/src/lib/components/settings/tabs/KnotsTab.svelte
@@ -59,9 +59,9 @@
 				<SettingsEntry icon={Server} title={knot.hostname}>
 					{#snippet tags()}
 						{#if knot.verified}
-							<Tag color="success" size="sm" icon={Check}>Verified</Tag>
+							<Tag color="success" size="small" icon={Check}>Verified</Tag>
 						{:else}
-							<Tag color="warning" size="sm" icon={X}>Unverified</Tag>
+							<Tag color="warning" size="small" icon={X}>Unverified</Tag>
 						{/if}
 					{/snippet}
 					{#snippet meta()}
diff --git a/web/src/lib/components/settings/tabs/SitesTab.svelte b/web/src/lib/components/settings/tabs/SitesTab.svelte
index 38abe9f2c..ca0b85092 100644
--- a/web/src/lib/components/settings/tabs/SitesTab.svelte
+++ b/web/src/lib/components/settings/tabs/SitesTab.svelte
@@ -113,7 +113,7 @@
 		<SettingsList>
 			<SettingsEntry icon={Globe} title={loaded.data}>
 				{#snippet tags()}
-					<Tag color="success" size="sm" icon={Check}>Active</Tag>
+					<Tag color="success" size="small" icon={Check}>Active</Tag>
 				{/snippet}
 				{#snippet actions()}
 					<Button
diff --git a/web/src/lib/components/settings/tabs/SpindlesTab.svelte b/web/src/lib/components/settings/tabs/SpindlesTab.svelte
index 279f636f6..8fdc3657c 100644
--- a/web/src/lib/components/settings/tabs/SpindlesTab.svelte
+++ b/web/src/lib/components/settings/tabs/SpindlesTab.svelte
@@ -56,9 +56,9 @@
 				<SettingsEntry icon={Spool} title={spindle.hostname}>
 					{#snippet tags()}
 						{#if spindle.verified}
-							<Tag color="success" size="sm" icon={Check}>Verified</Tag>
+							<Tag color="success" size="small" icon={Check}>Verified</Tag>
 						{:else}
-							<Tag color="warning" size="sm" icon={X}>Unverified</Tag>
+							<Tag color="warning" size="small" icon={X}>Unverified</Tag>
 						{/if}
 					{/snippet}
 					{#snippet meta()}
diff --git a/web/src/lib/components/shell/Topbar.svelte b/web/src/lib/components/shell/Topbar.svelte
index 7dd032048..28950f1b9 100644
--- a/web/src/lib/components/shell/Topbar.svelte
+++ b/web/src/lib/components/shell/Topbar.svelte
@@ -114,7 +114,7 @@
 					<div class={style.action({ class: "order-1 md:order-3" })}>
 						<Dropdown
 							insetShadow={true}
-							size="sm"
+							size="small"
 							id="new-menu"
 							group="topbar"
 							variant="button"
@@ -134,7 +134,7 @@
 							variant="ghost"
 							href={appPath("/notifications")}
 							icon={Bell}
-							size="sm"
+							size="small"
 							aria-hidden="true"
 							aria-label="Notifications"
 						/>
@@ -145,7 +145,7 @@
 							variant="ghost"
 							href={appPath("/search")}
 							icon={Search}
-							size="sm"
+							size="small"
 							aria-hidden="true"
 							aria-label="Search"
 						/>
@@ -169,7 +169,7 @@
 							align="right"
 							variant="button"
 							buttonVariant="ghost"
-							size="sm"
+							size="small"
 						>
 							{#snippet trigger()}
 								<User did={user.did} handle={user.handle} />
diff --git a/web/src/lib/components/shell/TopbarSearch.svelte b/web/src/lib/components/shell/TopbarSearch.svelte
index 48bc66ef6..dcb6f8107 100644
--- a/web/src/lib/components/shell/TopbarSearch.svelte
+++ b/web/src/lib/components/shell/TopbarSearch.svelte
@@ -21,6 +21,6 @@
 		placeholder="Search"
 		iconLeft={Search}
 		class="w-80"
-		size="sm"
+		size="small"
 	/>
 </form>
diff --git a/web/src/lib/components/ui/Button.stories.svelte b/web/src/lib/components/ui/Button.stories.svelte
index 0e0e224e3..7e4d373cb 100644
--- a/web/src/lib/components/ui/Button.stories.svelte
+++ b/web/src/lib/components/ui/Button.stories.svelte
@@ -16,7 +16,7 @@
 			},
 			size: {
 				control: { type: "inline-radio" },
-				options: ["sm", "md", "lg"]
+				options: ["small", "regular", "large"]
 			},
 			iconSide: {
 				control: { type: "inline-radio" },
@@ -28,7 +28,7 @@
 		},
 		args: {
 			variant: "default",
-			size: "md",
+			size: "regular",
 			iconSide: "left",
 			insetShadow: false,
 			disabled: false,
@@ -57,9 +57,9 @@
 
 <Story name="Sizes" asChild>
 	<div class="flex items-center gap-3">
-		<Button size="sm">Small</Button>
-		<Button size="md">Medium</Button>
-		<Button size="lg">Large</Button>
+		<Button size="small">Small</Button>
+		<Button size="regular">Medium</Button>
+		<Button size="large">Large</Button>
 	</div>
 </Story>
 
@@ -70,9 +70,9 @@
 <!-- the icon rides the same gap and scales with the size variant: size-4 up to lg, size-5 at lg. -->
 <Story name="Icon sizes" asChild>
 	<div class="flex items-center gap-3">
-		<Button size="sm" icon={Star}>Small</Button>
-		<Button size="md" icon={Star}>Medium</Button>
-		<Button size="lg" icon={Star}>Large</Button>
+		<Button size="small" icon={Star}>Small</Button>
+		<Button size="regular" icon={Star}>Medium</Button>
+		<Button size="large" icon={Star}>Large</Button>
 	</div>
 </Story>
 
diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte
index 4ea6cacaa..f4161f234 100644
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
@@ -62,9 +62,9 @@
 			// the two render at different heights side by side. py only takes over as the
 			// floor when a label wraps to a second line.
 			size: {
-				sm: "min-h-8 gap-1.5 px-2 py-1 typography-paragraph-small",
-				md: "min-h-9 gap-2 px-3 py-1 typography-paragraph-regular",
-				lg: "min-h-10 gap-2.5 px-4 py-1 typography-paragraph-large"
+				small: "min-h-8 gap-1.5 px-2 py-1 typography-paragraph-small",
+				regular: "min-h-9 gap-2 px-3 py-1 typography-paragraph-regular",
+				large: "min-h-10 gap-2.5 px-4 py-1 typography-paragraph-large"
 			},
 			insetShadow: {
 				true: "",
@@ -96,7 +96,7 @@
 		],
 		defaultVariants: {
 			variant: "default",
-			size: "md",
+			size: "regular",
 			insetShadow: false
 		}
 	});
@@ -132,7 +132,7 @@
 
 	let {
 		variant = "default",
-		size = "md",
+		size = "regular",
 		insetShadow = false,
 		href,
 		type = "button",
@@ -148,8 +148,8 @@
 	}: Props = $props();
 
 	const classes = $derived(button({ variant, size, insetShadow, class: className }));
-	const spinnerSize = $derived(spinnerClass ?? (size === "lg" ? "size-5" : "size-4"));
-	const iconSize = $derived(size === "lg" ? "size-5" : "size-4");
+	const spinnerSize = $derived(spinnerClass ?? (size === "large" ? "size-5" : "size-4"));
+	const iconSize = $derived(size === "large" ? "size-5" : "size-4");
 	const Icon = $derived(icon);
 </script>
 
diff --git a/web/src/lib/components/ui/Card.stories.svelte b/web/src/lib/components/ui/Card.stories.svelte
index b131d615f..a50d3d95e 100644
--- a/web/src/lib/components/ui/Card.stories.svelte
+++ b/web/src/lib/components/ui/Card.stories.svelte
@@ -10,13 +10,13 @@
 			border: { control: "boolean" },
 			shadow: { control: "boolean" },
 			background: { control: "boolean" },
-			padding: { control: { type: "select" }, options: ["default", "sm", "none"] }
+			padding: { control: { type: "select" }, options: ["regular", "small", "none"] }
 		},
 		args: {
 			border: true,
 			shadow: false,
 			background: true,
-			padding: "default"
+			padding: "regular"
 		}
 	});
 </script>
diff --git a/web/src/lib/components/ui/Card.svelte b/web/src/lib/components/ui/Card.svelte
index 0a60d9779..227610203 100644
--- a/web/src/lib/components/ui/Card.svelte
+++ b/web/src/lib/components/ui/Card.svelte
@@ -17,8 +17,8 @@
 				false: ""
 			},
 			padding: {
-				default: "px-6 py-4",
-				sm: "p-4",
+				regular: "px-6 py-4",
+				small: "p-4",
 				none: ""
 			}
 		},
@@ -26,7 +26,7 @@
 			border: true,
 			shadow: false,
 			background: true,
-			padding: "default"
+			padding: "regular"
 		}
 	});
 
@@ -50,7 +50,7 @@
 		border = true,
 		shadow = false,
 		background = true,
-		padding = "default",
+		padding = "regular",
 		class: className,
 		children,
 		...rest
diff --git a/web/src/lib/components/ui/ColorBall.stories.svelte b/web/src/lib/components/ui/ColorBall.stories.svelte
index 974a508ca..db509b22f 100644
--- a/web/src/lib/components/ui/ColorBall.stories.svelte
+++ b/web/src/lib/components/ui/ColorBall.stories.svelte
@@ -9,17 +9,17 @@
 		argTypes: {
 			size: {
 				control: { type: "inline-radio" },
-				options: ["sm", "md", "lg"]
+				options: ["small", "regular", "large"]
 			}
 		},
 		args: {
 			color: "#3178c6",
-			size: "sm"
+			size: "small"
 		}
 	});
 </script>
 
 <Story name="Default" />
-<Story name="Medium" args={{ size: "md" }} />
-<Story name="Large" args={{ size: "lg" }} />
-<Story name="Rust" args={{ color: "#dea584", size: "lg" }} />
+<Story name="Medium" args={{ size: "regular" }} />
+<Story name="Large" args={{ size: "large" }} />
+<Story name="Rust" args={{ color: "#dea584", size: "large" }} />
diff --git a/web/src/lib/components/ui/ColorBall.svelte b/web/src/lib/components/ui/ColorBall.svelte
index 7f2459afe..833aa9700 100644
--- a/web/src/lib/components/ui/ColorBall.svelte
+++ b/web/src/lib/components/ui/ColorBall.svelte
@@ -5,13 +5,14 @@
 		base: "shrink-0 rounded-full",
 		variants: {
 			size: {
-				sm: "size-2",
-				md: "size-4",
-				lg: "size-8"
+				small: "size-2",
+				regular: "size-4",
+				large: "size-8"
 			}
 		},
+		// the language dot is by far the common case, so the smallest rung is the default here
 		defaultVariants: {
-			size: "sm"
+			size: "small"
 		}
 	});
 
@@ -26,7 +27,7 @@
 		class?: string;
 	}
 
-	let { color, size = "sm", class: className }: Props = $props();
+	let { color, size = "small", class: className }: Props = $props();
 
 	const classes = $derived(colorBall({ size, class: className }));
 	const sphere = $derived(
diff --git a/web/src/lib/components/ui/Dropdown.stories.svelte b/web/src/lib/components/ui/Dropdown.stories.svelte
index 2f9ecdcb4..019f1d704 100644
--- a/web/src/lib/components/ui/Dropdown.stories.svelte
+++ b/web/src/lib/components/ui/Dropdown.stories.svelte
@@ -58,15 +58,15 @@
 	padding and label size the same way it does on a standalone Button. -->
 <Story name="Button trigger sizes" asChild>
 	<div class="flex items-center gap-3">
-		<Dropdown variant="button" size="sm" trigger={actionsTrigger} label="Actions">
+		<Dropdown variant="button" size="small" trigger={actionsTrigger} label="Actions">
 			<DropdownItem icon={Pencil}>Edit</DropdownItem>
 			<DropdownItem icon={Settings}>Settings</DropdownItem>
 		</Dropdown>
-		<Dropdown variant="button" size="md" trigger={actionsTrigger} label="Actions">
+		<Dropdown variant="button" size="regular" trigger={actionsTrigger} label="Actions">
 			<DropdownItem icon={Pencil}>Edit</DropdownItem>
 			<DropdownItem icon={Settings}>Settings</DropdownItem>
 		</Dropdown>
-		<Dropdown variant="button" size="lg" trigger={actionsTrigger} label="Actions">
+		<Dropdown variant="button" size="large" trigger={actionsTrigger} label="Actions">
 			<DropdownItem icon={Pencil}>Edit</DropdownItem>
 			<DropdownItem icon={Settings}>Settings</DropdownItem>
 		</Dropdown>
diff --git a/web/src/lib/components/ui/Dropdown.svelte b/web/src/lib/components/ui/Dropdown.svelte
index b2ba4f513..c6b910bd9 100644
--- a/web/src/lib/components/ui/Dropdown.svelte
+++ b/web/src/lib/components/ui/Dropdown.svelte
@@ -71,7 +71,7 @@
 		variant = "plain",
 		buttonVariant = "default",
 		insetShadow = false,
-		size = "md",
+		size = "regular",
 		align = "left",
 		label,
 		menuClass,
@@ -213,7 +213,7 @@
 <style>
 	@supports (position-area: bottom) and (position-try: flip-block) {
 		.dropdown-menu {
-			margin: 0.5rem;
+			margin-top: 0.5rem;
 			position-try: flip-block;
 		}
 
diff --git a/web/src/lib/components/ui/Input.stories.svelte b/web/src/lib/components/ui/Input.stories.svelte
index 7419759b2..9d8cd0078 100644
--- a/web/src/lib/components/ui/Input.stories.svelte
+++ b/web/src/lib/components/ui/Input.stories.svelte
@@ -12,7 +12,7 @@
 		argTypes: {
 			size: {
 				control: { type: "inline-radio" },
-				options: ["sm", "md", "lg"]
+				options: ["small", "regular", "large"]
 			},
 			error: { control: "boolean" },
 			disabled: { control: "boolean" },
@@ -20,7 +20,7 @@
 			placeholder: { control: "text" }
 		},
 		args: {
-			size: "md",
+			size: "regular",
 			error: false,
 			disabled: false,
 			loading: false,
@@ -41,25 +41,25 @@
 <!-- 32/36/40, the same heights Button's sm/md/lg draw, so the two align in a row. -->
 <Story name="Sizes" asChild>
 	<div class="flex items-center gap-3">
-		<Input size="sm" placeholder="Small" />
-		<Input size="md" placeholder="Medium" />
-		<Input size="lg" placeholder="Large" />
+		<Input size="small" placeholder="Small" />
+		<Input size="regular" placeholder="Medium" />
+		<Input size="large" placeholder="Large" />
 	</div>
 </Story>
 
 <!-- the icon rides the size variant's gap and steps up to size-5 at lg, as in Button. -->
 <Story name="Icon sizes" asChild>
 	<div class="flex items-center gap-3">
-		<Input size="sm" iconLeft={Search} placeholder="Small" />
-		<Input size="md" iconLeft={Search} placeholder="Medium" />
-		<Input size="lg" iconLeft={Search} placeholder="Large" />
+		<Input size="small" iconLeft={Search} placeholder="Small" />
+		<Input size="regular" iconLeft={Search} placeholder="Medium" />
+		<Input size="large" iconLeft={Search} placeholder="Large" />
 	</div>
 </Story>
 
 <!-- proof of the alignment claim: matched sizes, identical box heights. -->
 <Story name="With Button" asChild>
 	<div class="flex flex-col items-start gap-3">
-		{#each ["sm", "md", "lg"] as const as s (s)}
+		{#each ["small", "regular", "large"] as const as s (s)}
 			<div class="flex items-center gap-2">
 				<Input size={s} placeholder="Repository name" />
 				<Button size={s}>Create</Button>
diff --git a/web/src/lib/components/ui/Input.svelte b/web/src/lib/components/ui/Input.svelte
index 5e0681f4d..95eadd898 100644
--- a/web/src/lib/components/ui/Input.svelte
+++ b/web/src/lib/components/ui/Input.svelte
@@ -4,15 +4,15 @@
 	export const inputField = tv({
 		base: "flex items-center rounded-sm border bg-background-default transition-colors",
 		variants: {
-			// same 32/36/40 heights as Button's sm/md/lg, so an input and a button of the same
-			// size line up in a row. line-height + py + border stays under each min-h, so the
-			// field sits exactly on that height whatever it holds. horizontal padding runs one
+			// same 32/36/40 heights as Button's small/regular/large, so an input and a button of
+			// the same size line up in a row. line-height + py + border stays under each min-h, so
+			// the field sits exactly on that height whatever it holds. horizontal padding runs one
 			// step tighter than Button's — a button centres its label and needs the room, a
 			// field's text is left-aligned against the border.
 			size: {
-				sm: "min-h-8 gap-1.5 px-1.5 py-1 typography-paragraph-small",
-				md: "min-h-9 gap-2 px-2 py-1 typography-paragraph-regular",
-				lg: "min-h-10 gap-2.5 px-3 py-1 typography-paragraph-large"
+				small: "min-h-8 gap-1.5 px-1.5 py-1 typography-paragraph-small",
+				regular: "min-h-9 gap-2 px-2 py-1 typography-paragraph-regular",
+				large: "min-h-10 gap-2.5 px-3 py-1 typography-paragraph-large"
 			},
 			error: {
 				false:
@@ -25,7 +25,7 @@
 			}
 		},
 		defaultVariants: {
-			size: "md",
+			size: "regular",
 			error: false,
 			disabled: false
 		}
@@ -58,7 +58,7 @@
 
 	let {
 		value = $bindable(""),
-		size = "md",
+		size = "regular",
 		error = false,
 		disabled = false,
 		loading = false,
@@ -71,8 +71,8 @@
 	}: Props = $props();
 
 	const classes = $derived(inputField({ size, error, disabled, class: className }));
-	// matches Button: the icon only steps up on lg
-	const iconSize = $derived(size === "lg" ? "size-5" : "size-4");
+	// matches Button: the icon only steps up on large
+	const iconSize = $derived(size === "large" ? "size-5" : "size-4");
 </script>
 
 <div class={classes}>
diff --git a/web/src/lib/components/ui/MarkdownEditor.svelte b/web/src/lib/components/ui/MarkdownEditor.svelte
index e4c0d1b2e..06e10c8f8 100644
--- a/web/src/lib/components/ui/MarkdownEditor.svelte
+++ b/web/src/lib/components/ui/MarkdownEditor.svelte
@@ -72,7 +72,7 @@
 	<ButtonGroup class="self-start">
 		<Button
 			type="button"
-			size="sm"
+			size="small"
 			icon={Pencil}
 			{...segmentProps(tab === "write")}
 			onclick={() => (tab = "write")}
@@ -81,7 +81,7 @@
 		</Button>
 		<Button
 			type="button"
-			size="sm"
+			size="small"
 			icon={Eye}
 			{...segmentProps(tab === "preview")}
 			onclick={() => (tab = "preview")}
diff --git a/web/src/lib/components/ui/Tag.svelte b/web/src/lib/components/ui/Tag.svelte
index 0e509f1bf..cc00709f9 100644
--- a/web/src/lib/components/ui/Tag.svelte
+++ b/web/src/lib/components/ui/Tag.svelte
@@ -15,14 +15,14 @@
 				info: "border border-transparent bg-background-info-subtle text-foreground-info-strong"
 			},
 			size: {
-				sm: "px-1 typography-paragraph-mini",
-				md: "px-1.5 py-0.5 typography-paragraph-small",
-				lg: "px-2 py-1 typography-paragraph-regular font-normal gap-2"
+				small: "px-1 typography-paragraph-mini",
+				regular: "px-1.5 py-0.5 typography-paragraph-small",
+				large: "px-2 py-1 typography-paragraph-regular font-normal gap-2"
 			}
 		},
 		defaultVariants: {
 			color: "default",
-			size: "md"
+			size: "regular"
 		}
 	});
 
@@ -45,7 +45,7 @@
 
 	let {
 		color = "default",
-		size = "md",
+		size = "regular",
 		icon,
 		class: className,
 		children,
diff --git a/web/src/lib/components/ui/Textarea.svelte b/web/src/lib/components/ui/Textarea.svelte
index ca85aa780..7e9428591 100644
--- a/web/src/lib/components/ui/Textarea.svelte
+++ b/web/src/lib/components/ui/Textarea.svelte
@@ -15,13 +15,13 @@
 		variants: {
 			// the floor has to live on the textarea, not the root: the resize handle only ever
 			// shrinks the textarea, so a min-height on the root would let the handle drag past the
-			// box's own minimum and leave dead space under the field. `default` keeps
+			// box's own minimum and leave dead space under the field. `regular` keeps
 			// textareaMinHeight above in sync — it's 2px shorter because the root's border sits
-			// outside it. `compact` is for short fields (an ssh key, a one-line note) where the
+			// outside it. `small` is for short fields (an ssh key, a one-line note) where the
 			// editor-sized floor would swallow the form.
 			size: {
-				default: { textarea: "min-h-63.5" },
-				compact: { textarea: "min-h-20" }
+				regular: { textarea: "min-h-63.5" },
+				small: { textarea: "min-h-20" }
 			},
 			error: {
 				false: {
@@ -53,7 +53,7 @@
 			error: false,
 			disabled: false,
 			readonly: false,
-			size: "default"
+			size: "regular"
 		}
 	});
 
@@ -86,7 +86,7 @@
 		loading = false,
 		readonly = false,
 		resizeable = false,
-		size = "default",
+		size = "regular",
 		iconLeft,
 		iconRight,
 		class: className,
diff --git a/web/src/lib/components/welcome/KeysStep.svelte b/web/src/lib/components/welcome/KeysStep.svelte
index eff4fa665..f15dbc772 100644
--- a/web/src/lib/components/welcome/KeysStep.svelte
+++ b/web/src/lib/components/welcome/KeysStep.svelte
@@ -54,7 +54,7 @@
 			{#snippet children({ id })}
 				<Textarea
 					{id}
-					size="compact"
+					size="small"
 					rows={3}
 					required
 					placeholder="ssh-ed25519 AAAA..."
diff --git a/web/src/routes/[handle]/[repo]/settings/access/new/+page.svelte b/web/src/routes/[handle]/[repo]/settings/access/new/+page.svelte
index 38e07bdc5..be7a2c34b 100644
--- a/web/src/routes/[handle]/[repo]/settings/access/new/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/access/new/+page.svelte
@@ -27,7 +27,7 @@
 	title="Add collaborator"
 	description="Collaborators can push to this repository."
 >
-	<SettingsList padding="tight">
+	<SettingsList padding="small">
 		<FormRow label="User" for="collaborator">
 			<Input id="collaborator" bind:value={user} placeholder="user.tngl.sh" />
 		</FormRow>
diff --git a/web/src/routes/[handle]/[repo]/settings/hooks/new/+page.svelte b/web/src/routes/[handle]/[repo]/settings/hooks/new/+page.svelte
index 3e95e1476..eb6351543 100644
--- a/web/src/routes/[handle]/[repo]/settings/hooks/new/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/hooks/new/+page.svelte
@@ -43,7 +43,7 @@
 </script>
 
 <DrillDown backLabel="Hooks" backHref={back} title="New webhook">
-	<SettingsList padding="tight">
+	<SettingsList padding="small">
 		<FormRow
 			label="Payload URL"
 			description="The URL that will receive the webhook POST requests."
diff --git a/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte b/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte
index cccdecccb..9d5015269 100644
--- a/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte
@@ -40,7 +40,7 @@
 </script>
 
 <DrillDown backLabel="General" backHref={back} title="Add custom label">
-	<SettingsList padding="tight">
+	<SettingsList padding="small">
 		<FormRow
 			label="Label type"
 			description={[
diff --git a/web/src/routes/[handle]/[repo]/settings/pipelines/secrets/new/+page.svelte b/web/src/routes/[handle]/[repo]/settings/pipelines/secrets/new/+page.svelte
index 38944be7b..68f9a4a91 100644
--- a/web/src/routes/[handle]/[repo]/settings/pipelines/secrets/new/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/pipelines/secrets/new/+page.svelte
@@ -28,7 +28,7 @@
 	title="Add secret"
 	description="Secrets are available as environment variables in the workflow."
 >
-	<SettingsList padding="tight">
+	<SettingsList padding="small">
 		<FormRow label="Name" for="secret-name">
 			<Input id="secret-name" bind:value={name} placeholder="SECRET_NAME" />
 		</FormRow>
diff --git a/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte b/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte
index 1e213b68f..60ab27487 100644
--- a/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte
@@ -61,7 +61,7 @@
 		{/each}
 	</div>
 
-	<SettingsList padding="tight">
+	<SettingsList padding="small">
 		<FormRow label="Name" for="repo-name">
 			<Input id="repo-name" bind:value={name} placeholder="great-project" />
 		</FormRow>
diff --git a/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte b/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
index 438206b19..8af8b2904 100644
--- a/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
@@ -136,8 +136,8 @@
 						<span class="font-mono typography-monospace-regular text-foreground-default">
 							{deploy.branch}
 						</span>
-						<Tag color="success" size="sm" icon={Check}>{deploy.status}</Tag>
-						<Tag color="gray" size="sm" icon={Settings2}>{deploy.reason}</Tag>
+						<Tag color="success" size="small" icon={Check}>{deploy.status}</Tag>
+						<Tag color="gray" size="small" icon={Settings2}>{deploy.reason}</Tag>
 					</span>
 				{/snippet}
 				<span class="typography-paragraph-regular text-foreground-subtle">{deploy.when}</span>
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index 152eabacc..bbc912442 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -76,7 +76,7 @@
 
 		<Button
 			type="submit"
-			size="sm"
+			size="small"
 			loading={login.loading}
 			spinnerClass="size-4"
 			aria-label={login.loading ? "Logging in" : undefined}
diff --git a/web/src/routes/settings/emails/new/+page.svelte b/web/src/routes/settings/emails/new/+page.svelte
index 2cf3e7dc3..110e420b2 100644
--- a/web/src/routes/settings/emails/new/+page.svelte
+++ b/web/src/routes/settings/emails/new/+page.svelte
@@ -23,7 +23,7 @@
 	title="Add email"
 	description="Commits using this email will be associated with your profile."
 >
-	<SettingsList padding="tight">
+	<SettingsList padding="small">
 		<FormRow label="Email" for="email-address">
 			<Input id="email-address" type="email" bind:value={email} placeholder="your@email.com" />
 		</FormRow>
diff --git a/web/src/routes/settings/keys/new/+page.svelte b/web/src/routes/settings/keys/new/+page.svelte
index eaf623b3e..35a5b3302 100644
--- a/web/src/routes/settings/keys/new/+page.svelte
+++ b/web/src/routes/settings/keys/new/+page.svelte
@@ -37,7 +37,7 @@
 >
 	<ErrorAlert label={save.error} />
 
-	<SettingsList padding="tight">
+	<SettingsList padding="small">
 		<FormRow label="Title" for="key-title">
 			<Input id="key-title" bind:value={name} placeholder="Work laptop" />
 		</FormRow>
diff --git a/web/src/routes/settings/knots/new/+page.svelte b/web/src/routes/settings/knots/new/+page.svelte
index daf9c2ae5..35e1b3faa 100644
--- a/web/src/routes/settings/knots/new/+page.svelte
+++ b/web/src/routes/settings/knots/new/+page.svelte
@@ -23,7 +23,7 @@
 	title="Register a knot"
 	description="Enter the hostname of your knot to get started."
 >
-	<SettingsList padding="tight">
+	<SettingsList padding="small">
 		<FormRow label="Knot address" for="knot-address">
 			<Input id="knot-address" bind:value={address} placeholder="knot.example.com" />
 		</FormRow>
diff --git a/web/src/routes/settings/profile/avatar/+page.svelte b/web/src/routes/settings/profile/avatar/+page.svelte
index 0b7e13d23..7a58cbfa5 100644
--- a/web/src/routes/settings/profile/avatar/+page.svelte
+++ b/web/src/routes/settings/profile/avatar/+page.svelte
@@ -24,7 +24,7 @@
 	title="Upload or remove avatar"
 	description="Upload a new image (PNG or JPEG, max 5MB) or remove your current avatar."
 >
-	<SettingsList padding="tight">
+	<SettingsList padding="small">
 		<FormRow label="Avatar">
 			<div class="flex items-center justify-end gap-4">
 				<span class="typography-paragraph-regular text-foreground-muted">
diff --git a/web/src/routes/settings/profile/deactivate/+page.svelte b/web/src/routes/settings/profile/deactivate/+page.svelte
index a3ac9628b..53d00f415 100644
--- a/web/src/routes/settings/profile/deactivate/+page.svelte
+++ b/web/src/routes/settings/profile/deactivate/+page.svelte
@@ -18,7 +18,7 @@
 	title="Deactivate account"
 	description="Your profile and repositories will become inaccessible. You can reactivate by logging in again."
 >
-	<SettingsList padding="tight">
+	<SettingsList padding="small">
 		<FormRow
 			label="Password"
 			description="Confirm your identity to proceed."
diff --git a/web/src/routes/settings/profile/delete/+page.svelte b/web/src/routes/settings/profile/delete/+page.svelte
index d1f99f572..9c503b744 100644
--- a/web/src/routes/settings/profile/delete/+page.svelte
+++ b/web/src/routes/settings/profile/delete/+page.svelte
@@ -18,7 +18,7 @@
 	title="Delete account"
 	description="This permanently deletes your account and all associated data. This cannot be undone."
 >
-	<SettingsList padding="tight">
+	<SettingsList padding="small">
 		<FormRow label="Password" description="Confirm your identity to proceed." for="delete-password">
 			<Input id="delete-password" type="password" bind:value={password} />
 		</FormRow>
diff --git a/web/src/routes/settings/profile/handle/+page.svelte b/web/src/routes/settings/profile/handle/+page.svelte
index 0c5f4236b..7d5c2066b 100644
--- a/web/src/routes/settings/profile/handle/+page.svelte
+++ b/web/src/routes/settings/profile/handle/+page.svelte
@@ -23,7 +23,7 @@
 </script>
 
 <DrillDown backLabel="Profile" backHref="/settings" title="Change handle">
-	<SettingsList padding="tight">
+	<SettingsList padding="small">
 		<FormRow label="I have my own domain">
 			<div class="flex sm:justify-end">
 				<Toggle bind:checked={ownDomain} aria-label="I have my own domain" />
diff --git a/web/src/routes/settings/profile/password/+page.svelte b/web/src/routes/settings/profile/password/+page.svelte
index bcbaa740d..3d1f5931b 100644
--- a/web/src/routes/settings/profile/password/+page.svelte
+++ b/web/src/routes/settings/profile/password/+page.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <DrillDown backLabel="Profile" backHref="/settings" title="Change password">
-	<SettingsList padding="tight">
+	<SettingsList padding="small">
 		<FormRow
 			label="Current password"
 			description="Confirm your identity to proceed."
diff --git a/web/src/routes/settings/spindles/new/+page.svelte b/web/src/routes/settings/spindles/new/+page.svelte
index 596008f40..beffa3b60 100644
--- a/web/src/routes/settings/spindles/new/+page.svelte
+++ b/web/src/routes/settings/spindles/new/+page.svelte
@@ -23,7 +23,7 @@
 	title="Register a spindle"
 	description="Enter the hostname of your spindle to get started."
 >
-	<SettingsList padding="tight">
+	<SettingsList padding="small">
 		<FormRow label="Spindle address" for="spindle-address">
 			<Input id="spindle-address" bind:value={address} placeholder="spindle.example.com" />
 		</FormRow>
-- 
2.51.2