From 1bb7cda03c6c635a724fd49ac67f14201eaf28c2 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Sat, 19 Sep 2026 03:05:31 +0200
Subject: [PATCH] web/pulls: rescale pull views

Signed-off-by: eti <eti@eti.tf>
---
 .../repo/pulls/PullActions.stories.svelte     |  6 +-
 .../repo/pulls/PullApproveCi.svelte           |  8 +--
 .../repo/pulls/PullCommitList.stories.svelte  |  4 +-
 .../repo/pulls/PullCommitList.svelte          |  4 +-
 .../pulls/PullCommitListHeader.stories.svelte |  8 +--
 .../repo/pulls/PullCommitListHeader.svelte    | 11 ++--
 .../repo/pulls/PullCommitRow.svelte           | 16 ++----
 .../components/repo/pulls/PullCompose.svelte  | 40 +++++++-------
 .../repo/pulls/PullDiscussion.svelte          | 10 ++--
 .../pulls/PullReviewComment.stories.svelte    |  4 +-
 .../repo/pulls/PullReviewComment.svelte       | 14 +++--
 .../repo/pulls/PullReviewCommentEditor.svelte |  4 +-
 .../PullReviewCommentForm.stories.svelte      | 14 ++---
 .../repo/pulls/PullReviewCommentForm.svelte   | 55 ++++++++++++++-----
 .../repo/pulls/PullVersionList.stories.svelte |  2 +-
 .../repo/pulls/PullVersionList.svelte         | 20 ++++---
 16 files changed, 124 insertions(+), 96 deletions(-)

diff --git a/web/src/lib/components/repo/pulls/PullActions.stories.svelte b/web/src/lib/components/repo/pulls/PullActions.stories.svelte
index 674301ddb..d1ddf68fa 100644
--- a/web/src/lib/components/repo/pulls/PullActions.stories.svelte
+++ b/web/src/lib/components/repo/pulls/PullActions.stories.svelte
@@ -26,7 +26,7 @@
 
 <Story name="Open, can close">
 	{#snippet template(args)}
-		<div class="w-100 bg-background-default p-4">
+		<div class="w-100 bg-background-default p-md">
 			<PullActions {...args} canMerge={false} />
 		</div>
 	{/snippet}
@@ -64,7 +64,7 @@
 
 <Story name="Interactive">
 	{#snippet template(args)}
-		<div class="w-100 space-y-2 bg-background-default p-4">
+		<div class="w-100 space-y-xs bg-background-default p-md">
 			<PullActions
 				{...args}
 				{pullState}
@@ -77,7 +77,7 @@
 					calls.push(`merge (${style})`);
 				}}
 			/>
-			<output class="block space-y-1 typography-monospace-small">
+			<output class="block space-y-2xs typography-monospace-small">
 				{#each calls as call, i (i)}
 					<p>{call}</p>
 				{/each}
diff --git a/web/src/lib/components/repo/pulls/PullApproveCi.svelte b/web/src/lib/components/repo/pulls/PullApproveCi.svelte
index 33f6f1f29..9c11f0c8d 100644
--- a/web/src/lib/components/repo/pulls/PullApproveCi.svelte
+++ b/web/src/lib/components/repo/pulls/PullApproveCi.svelte
@@ -56,17 +56,17 @@
 			: "This fork-based pull request needs approval to run CI."}
 >
 	{#if !approved}
-		<p class="flex items-center gap-2 text-foreground-warning">
-			<TriangleAlert class="size-4 shrink-0" />
+		<p class="flex items-center gap-xs text-foreground-warning">
+			<TriangleAlert class="size-3.5 shrink-0" />
 			<span class="font-medium">
 				{changed ? "Workflow files changed" : "Workflow needs approval"}
 			</span>
 		</p>
 		{#if changed}
-			<ul class="space-y-1 overflow-x-auto">
+			<ul class="space-y-2xs overflow-x-auto">
 				{#each changedWorkflows as path (path)}
 					<li class="flex items-center gap-1.5 whitespace-nowrap">
-						<FileWarning class="size-4 shrink-0 text-foreground-warning" />
+						<FileWarning class="size-3.5 shrink-0 text-foreground-warning" />
 						<span class="typography-monospace-small">{path}</span>
 					</li>
 				{/each}
diff --git a/web/src/lib/components/repo/pulls/PullCommitList.stories.svelte b/web/src/lib/components/repo/pulls/PullCommitList.stories.svelte
index 60d14ac1f..0b8d23769 100644
--- a/web/src/lib/components/repo/pulls/PullCommitList.stories.svelte
+++ b/web/src/lib/components/repo/pulls/PullCommitList.stories.svelte
@@ -261,7 +261,7 @@
 
 <Story name="Interactive range">
 	{#snippet template(args)}
-		<Card padding="small" class="w-full space-y-2">
+		<Card padding="small" class="w-full space-y-xs">
 			<PullCommitList
 				{...args}
 				selection={{
@@ -278,7 +278,7 @@
 
 <Story name="Interactive change">
 	{#snippet template(args)}
-		<Card padding="small" class="w-full space-y-2">
+		<Card padding="small" class="w-full space-y-xs">
 			<PullCommitList
 				{...args}
 				selection={{
diff --git a/web/src/lib/components/repo/pulls/PullCommitList.svelte b/web/src/lib/components/repo/pulls/PullCommitList.svelte
index 401de460b..3ef0bae55 100644
--- a/web/src/lib/components/repo/pulls/PullCommitList.svelte
+++ b/web/src/lib/components/repo/pulls/PullCommitList.svelte
@@ -65,7 +65,7 @@
 
 {#snippet rangeRow(_i: number, item: CommitSummary | "base", actions: RowActions)}
 	{#if item === "base"}
-		<div class="relative flex h-10 flex-1 items-center px-3">
+		<div class="relative flex h-10 flex-1 items-center px-sm">
 			<button
 				type="button"
 				class="absolute inset-0 cursor-pointer"
@@ -120,7 +120,7 @@
 					class="absolute top-0 left-0 z-10"
 				/>
 			</button>
-			<div class="flex h-10 flex-1 items-center px-3">
+			<div class="flex h-10 flex-1 items-center px-sm">
 				<button type="button" class="cursor-pointer" onclick={() => onselect("")}>
 					All changes
 				</button>
diff --git a/web/src/lib/components/repo/pulls/PullCommitListHeader.stories.svelte b/web/src/lib/components/repo/pulls/PullCommitListHeader.stories.svelte
index b35b530fc..7f25ad303 100644
--- a/web/src/lib/components/repo/pulls/PullCommitListHeader.stories.svelte
+++ b/web/src/lib/components/repo/pulls/PullCommitListHeader.stories.svelte
@@ -76,7 +76,7 @@
 </script>
 
 {#snippet frame(args: Props)}
-	<Card padding="small" class="w-150 space-y-2">
+	<Card padding="small" class="w-150 space-y-xs">
 		<PullCommitListHeader {...args} />
 	</Card>
 {/snippet}
@@ -97,7 +97,7 @@
 <!-- the appview slots resubmit/approve buttons in here, next to the version list -->
 <Story name="With actions slot">
 	{#snippet template(args)}
-		<Card padding="small" class="w-150 space-y-2">
+		<Card padding="small" class="w-150 space-y-xs">
 			<PullCommitListHeader {...args}>
 				{#snippet actions()}
 					<Button icon={IterationCcw} title="Resubmit pull request">Resubmit</Button>
@@ -130,7 +130,7 @@
 
 <Story name="Shared id toggle">
 	{#snippet template(args)}
-		<Card padding="small" class="w-150 space-y-2">
+		<Card padding="small" class="w-150 space-y-xs">
 			<PullCommitListHeader {...args} bind:showChangeIds />
 			<PullCommitList
 				commits={args.commits}
@@ -143,7 +143,7 @@
 
 <Story name="Interactive">
 	{#snippet template(args)}
-		<Card padding="small" class="w-150 space-y-2">
+		<Card padding="small" class="w-150 space-y-xs">
 			<PullCommitListHeader
 				{...args}
 				versionRange={viewed}
diff --git a/web/src/lib/components/repo/pulls/PullCommitListHeader.svelte b/web/src/lib/components/repo/pulls/PullCommitListHeader.svelte
index 15d26457b..40398bee0 100644
--- a/web/src/lib/components/repo/pulls/PullCommitListHeader.svelte
+++ b/web/src/lib/components/repo/pulls/PullCommitListHeader.svelte
@@ -41,8 +41,8 @@
 </script>
 
 <div class="flex justify-between">
-	<div class="flex items-center gap-2 px-3 py-1">
-		<Layers class="size-4" />
+	<div class="flex items-center gap-xs px-sm py-2xs">
+		<Layers class="size-3.5" />
 		{#if hasChangeIds}
 			<button
 				type="button"
@@ -55,15 +55,14 @@
 		{:else}
 			<span>Commits</span>
 		{/if}
-		<Tag color="gray" size="regular">{count}</Tag>
+		<Tag color="gray">{count}</Tag>
 		{#if isInterdiff}
-			<Tag icon={Circle} color="highlight" size="regular">Interdiff</Tag>
+			<Tag icon={Circle} color="highlight">Interdiff</Tag>
 		{/if}
 	</div>
-	<div class="flex gap-2">
+	<div class="flex gap-xs">
 		{@render actions?.()}
 		{#if versions && versionRange}
-			<Separator orientation="vertical" class="first:hidden" />
 			<PullVersionList {versions} range={versionRange} oncommit={oncommitVersions} />
 		{/if}
 	</div>
diff --git a/web/src/lib/components/repo/pulls/PullCommitRow.svelte b/web/src/lib/components/repo/pulls/PullCommitRow.svelte
index 7176aa802..875e208b7 100644
--- a/web/src/lib/components/repo/pulls/PullCommitRow.svelte
+++ b/web/src/lib/components/repo/pulls/PullCommitRow.svelte
@@ -62,7 +62,7 @@
 	role="none"
 	{onpointerenter}
 	{onpointerleave}
-	class="relative grid min-h-10 flex-1 grid-cols-[minmax(0,1fr)] gap-x-2 px-3 sm:grid-cols-[5rem_minmax(0,1fr)_2.5rem_7rem]"
+	class="relative grid min-h-10 flex-1 grid-cols-[minmax(0,1fr)] gap-x-xs px-sm sm:grid-cols-[5rem_minmax(0,1fr)_10rem]"
 >
 	{#if onclick}
 		<button
@@ -98,7 +98,7 @@
 		</span>
 	{/if}
 	<div
-		class="pointer-events-none relative col-start-1 row-start-1 flex h-10 min-w-0 items-center gap-2 sm:col-start-2"
+		class="pointer-events-none relative col-start-1 row-start-1 flex h-10 min-w-0 items-center gap-xs sm:col-start-2"
 	>
 		{#if showAvatar}
 			{#if commit.authorHandle && commit.authorDid}
@@ -142,24 +142,20 @@
 		{/if}
 	</div>
 	<div
-		class="pointer-events-none relative col-start-3 row-start-1 hidden h-10 items-center justify-end sm:flex"
+		class="pointer-events-none relative col-start-3 row-start-1 hidden h-10 items-center justify-end gap-sm sm:flex"
 	>
 		{#if commit.commentCount}
-			<div class="flex items-center gap-1 text-foreground-muted">
+			<div class="flex items-center gap-2xs text-foreground-muted">
 				<span>{commit.commentCount}</span>
-				<MessageSquare class="size-4" />
+				<MessageSquare class="size-3.5" />
 			</div>
 		{/if}
-	</div>
-	<div
-		class="pointer-events-none relative col-start-4 row-start-1 hidden h-10 items-center justify-end sm:flex"
-	>
 		{#if commit.stat}
 			<DiffStatPill stat={commit.stat} size="small" />
 		{/if}
 	</div>
 	{#if hasBody && expanded}
 		<pre
-			class="col-span-3 col-start-2 row-start-2 mb-2 hidden typography-monospace-regular whitespace-pre-wrap sm:block">{commit.body}</pre>
+			class="col-span-2 col-start-2 row-start-2 mb-xs hidden typography-monospace-regular whitespace-pre-wrap sm:block">{commit.body}</pre>
 	{/if}
 </div>
diff --git a/web/src/lib/components/repo/pulls/PullCompose.svelte b/web/src/lib/components/repo/pulls/PullCompose.svelte
index db2dbad38..ac5dbbfec 100644
--- a/web/src/lib/components/repo/pulls/PullCompose.svelte
+++ b/web/src/lib/components/repo/pulls/PullCompose.svelte
@@ -2,10 +2,10 @@
 	import { tv } from "tailwind-variants";
 
 	export const composeTab = tv({
-		base: "group flex flex-1 flex-col gap-1 rounded-sm p-3 text-left transition-colors disabled:cursor-not-allowed",
+		base: "group flex flex-1 flex-col gap-2xs rounded-sm p-sm text-left transition-colors disabled:cursor-not-allowed",
 		variants: {
 			active: {
-				true: "cursor-default border border-border-default bg-background-default shadow-xs",
+				true: "cursor-default border border-border-default bg-background-default",
 				false: "border border-transparent hover:bg-background-default/60"
 			}
 		}
@@ -328,7 +328,7 @@
 
 {#snippet notice(message: string, danger = false)}
 	<div
-		class="rounded-sm border px-4 py-3 typography-paragraph-small {danger
+		class="rounded-sm border px-md py-sm typography-paragraph-small {danger
 			? 'border-border-danger bg-background-danger-subtle text-foreground-danger'
 			: 'border-border-default bg-background-subtle text-foreground-muted'}"
 	>
@@ -349,26 +349,26 @@
 	</button>
 {/snippet}
 
-<div class="flex flex-col gap-4">
-	<Card class="py-6">
+<div class="flex flex-col gap-md">
+	<Card class="py-xl">
 		{#if view.prefillError}
 			<div
-				class="mb-4 flex items-center gap-2 rounded-sm border border-border-danger bg-background-danger-subtle px-3 py-2 typography-paragraph-small text-foreground-danger"
+				class="mb-md flex items-center gap-xs rounded-sm border border-border-danger bg-background-danger-subtle px-sm py-xs typography-paragraph-small text-foreground-danger"
 			>
-				<TriangleAlert class="size-4 shrink-0" aria-hidden="true" />
+				<TriangleAlert class="size-3.5 shrink-0" aria-hidden="true" />
 				<span>{view.prefillError}</span>
 			</div>
 		{/if}
 
-		<form onsubmit={save.run} class="flex flex-col pl-3">
-			<section class="relative flex flex-col gap-3 border-l border-border-default pb-10 pl-6">
+		<form onsubmit={save.run} class="flex flex-col pl-sm">
+			<section class="relative flex flex-col gap-sm border-l border-border-default pb-3xl pl-xl">
 				<StepMarker class="absolute top-0 -left-3">1</StepMarker>
-				<h3 class="my-0 typography-paragraph-large font-medium text-foreground-default">
+				<h3 class="my-none typography-paragraph-large font-medium text-foreground-default">
 					Source
 				</h3>
-				<div class="flex flex-col gap-3">
+				<div class="flex flex-col gap-sm">
 					<div
-						class="flex items-center justify-stretch gap-1 rounded-md border border-border-default bg-background-subtle p-1.5"
+						class="flex items-center justify-stretch gap-2xs rounded-md border border-border-default bg-background-subtle p-1.5"
 					>
 						{@render tab("branch", "Compare branches", "Select a source branch")}
 						{@render tab(
@@ -398,8 +398,8 @@
 								/>
 							{/snippet}
 						</Field>
-						<div class="flex flex-col gap-2">
-							<p class="my-0 typography-paragraph-small text-foreground-muted">
+						<div class="flex flex-col gap-xs">
+							<p class="my-none typography-paragraph-small text-foreground-muted">
 								You can paste a <code>git diff</code> or a
 								<code>git format-patch</code> patch series here.
 							</p>
@@ -411,7 +411,7 @@
 							/>
 						</div>
 					{:else}
-						<div class="flex flex-col gap-3 md:flex-row md:flex-wrap">
+						<div class="flex flex-col gap-sm md:flex-row md:flex-wrap">
 							<Field label="Merge into" class="min-w-48">
 								{#snippet children({ id })}
 									<Select
@@ -490,9 +490,9 @@
 				</div>
 			</section>
 
-			<section class="relative flex flex-col gap-3 border-l border-border-default pl-6">
+			<section class="relative flex flex-col gap-sm border-l border-border-default pl-xl">
 				<StepMarker class="absolute top-0 -left-3">2</StepMarker>
-				<h3 class="my-0 typography-paragraph-large font-medium text-foreground-default">
+				<h3 class="my-none typography-paragraph-large font-medium text-foreground-default">
 					Details
 				</h3>
 				{#if !view.showDetails}
@@ -502,7 +502,7 @@
 							: "Pick a source and target above to describe your change."
 					)}
 				{:else}
-					<div class="flex flex-col gap-4">
+					<div class="flex flex-col gap-md">
 						<Field label="Title" required>
 							{#snippet children({ id })}
 								<Input
@@ -532,7 +532,7 @@
 
 						<ErrorAlert label={save.error} />
 
-						<div class="flex items-center justify-end gap-2">
+						<div class="flex items-center justify-end gap-xs">
 							<AccountSelector
 								{accounts}
 								bind:value={() => acting?.did ?? "", (did) => (picked = did)}
@@ -557,7 +557,7 @@
 	</Card>
 
 	{#if view.showDetails && view.source !== "patch"}
-		<Card padding="small" class="space-y-2">
+		<Card padding="small" class="space-y-xs">
 			{#if view.commitsError}
 				{@render notice(view.commitsError, true)}
 			{:else if commits.length === 0}
diff --git a/web/src/lib/components/repo/pulls/PullDiscussion.svelte b/web/src/lib/components/repo/pulls/PullDiscussion.svelte
index c59100aa3..c1c414c46 100644
--- a/web/src/lib/components/repo/pulls/PullDiscussion.svelte
+++ b/web/src/lib/components/repo/pulls/PullDiscussion.svelte
@@ -46,20 +46,20 @@
 	const groups = $derived(groupCommentsByVersion(visible, versions));
 </script>
 
-<div class="space-y-4 px-2 pt-2 pb-48">
+<div class="space-y-md px-xs pt-xs pb-48">
 	{#if !visible.length}
-		<EmptyState size="inline" message="No comments yet." class="p-2" />
+		<EmptyState size="inline" message="No comments yet." class="p-xs" />
 	{:else}
 		{#each groups as group (group.version ?? "pre")}
 			{#if group.version && group.version > 0}
 				<Separator variant="line" />
 			{/if}
-			<div class="space-y-2">
+			<div class="space-y-xs">
 				{#if group.version !== undefined}
 					{@const isActive = group.version === currentVersion}
 					{@const version = versions[group.version]}
-					<div class="flex h-6 items-center justify-between px-2">
-						<div class="flex items-center gap-2">
+					<div class="flex h-6 items-center justify-between px-xs">
+						<div class="flex items-center gap-xs">
 							<span class:text-foreground-muted={!isActive}>v{group.version}</span>
 							<TimeAgo class="text-foreground-subtle" value={version.createdAt} />
 						</div>
diff --git a/web/src/lib/components/repo/pulls/PullReviewComment.stories.svelte b/web/src/lib/components/repo/pulls/PullReviewComment.stories.svelte
index 7e35ddda5..7b1e606bb 100644
--- a/web/src/lib/components/repo/pulls/PullReviewComment.stories.svelte
+++ b/web/src/lib/components/repo/pulls/PullReviewComment.stories.svelte
@@ -20,7 +20,7 @@
 
 <Story name="Comment">
 	{#snippet template(args)}
-		<div class="w-75 bg-background-default p-4">
+		<div class="w-75 bg-background-default p-md">
 			<ReviewComment {...args} />
 		</div>
 	{/snippet}
@@ -28,7 +28,7 @@
 
 <Story name="Active Comment" args={{ comment: samuel, active: true }}>
 	{#snippet template(args)}
-		<div class="w-75 bg-background-default p-4">
+		<div class="w-75 bg-background-default p-md">
 			<ReviewComment {...args} />
 		</div>
 	{/snippet}
diff --git a/web/src/lib/components/repo/pulls/PullReviewComment.svelte b/web/src/lib/components/repo/pulls/PullReviewComment.svelte
index cfd03baee..afc249f61 100644
--- a/web/src/lib/components/repo/pulls/PullReviewComment.svelte
+++ b/web/src/lib/components/repo/pulls/PullReviewComment.svelte
@@ -40,7 +40,9 @@
 	}
 </script>
 
-<div class="flex flex-col gap-2 p-2 {active ? 'text-foreground-default' : 'text-foreground-muted'}">
+<div
+	class="flex flex-col gap-xs p-xs {active ? 'text-foreground-default' : 'text-foreground-muted'}"
+>
 	<header class="flex h-8 items-center justify-between">
 		<!-- User pins its own `text-foreground-default`, so the dimmed state has to say so -->
 		<ProfilePopover did={comment.authorDid}>
@@ -52,7 +54,7 @@
 				class={active ? undefined : "text-foreground-muted"}
 			/>
 		</ProfilePopover>
-		<div class="flex items-center gap-2">
+		<div class="flex items-center gap-xs">
 			<a
 				id="comment-{comment.rkey}"
 				href="#comment-{comment.rkey}"
@@ -80,7 +82,9 @@
 	</header>
 	<div>
 		{#if comment.embed}
-			<Tag class="py-1 typography-monospace-small">{comment.embed.commit.slice(0, 8)}</Tag>
+			<Tag class="py-2xs typography-monospace-small font-normal"
+				>{comment.embed.commit.slice(0, 8)}</Tag
+			>
 		{/if}
 		{#if editing}
 			<PullReviewCommentEditor
@@ -95,14 +99,14 @@
 		{:else}
 			{#if comment.bodyHtml}
 				<article
-					class="markup mt-1 {active ? '' : 'text-foreground-muted'}"
+					class="markup mt-2xs {active ? '' : 'text-foreground-muted'}"
 					use:enhanceCodeblocks={comment.bodyHtml}
 				>
 					<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
 					{@html comment.bodyHtml}
 				</article>
 			{:else if comment.body}
-				<article class="mt-1 whitespace-pre-wrap">
+				<article class="mt-2xs whitespace-pre-wrap">
 					{comment.body}
 				</article>
 			{/if}
diff --git a/web/src/lib/components/repo/pulls/PullReviewCommentEditor.svelte b/web/src/lib/components/repo/pulls/PullReviewCommentEditor.svelte
index b2cb16a0a..e30123f87 100644
--- a/web/src/lib/components/repo/pulls/PullReviewCommentEditor.svelte
+++ b/web/src/lib/components/repo/pulls/PullReviewCommentEditor.svelte
@@ -43,7 +43,7 @@
 	const canSubmit = $derived(body.trim() !== "" && !publish.loading);
 </script>
 
-<form onsubmit={publish.run} class="flex flex-col gap-2">
+<form onsubmit={publish.run} class="flex flex-col gap-xs">
 	<MarkdownEditor
 		name="body"
 		{rows}
@@ -56,7 +56,7 @@
 	/>
 
 	<ErrorAlert label={publish.error} />
-	<div class="flex items-center gap-2">
+	<div class="flex items-center gap-xs">
 		<Button
 			type="submit"
 			variant="primary"
diff --git a/web/src/lib/components/repo/pulls/PullReviewCommentForm.stories.svelte b/web/src/lib/components/repo/pulls/PullReviewCommentForm.stories.svelte
index 8eaef0ed5..af3b643ff 100644
--- a/web/src/lib/components/repo/pulls/PullReviewCommentForm.stories.svelte
+++ b/web/src/lib/components/repo/pulls/PullReviewCommentForm.stories.svelte
@@ -44,14 +44,14 @@
 
 <Story name="Resting" args={{ allowPinToCommit: false }}>
 	{#snippet template(args)}
-		<div class="w-75 space-y-2 bg-background-default p-4">
+		<div class="w-75 space-y-xs bg-background-default p-md">
 			<PullReviewCommentForm
 				{...args}
 				onsubmit={(body, commit) => {
 					submitted.push(commit ? `${body} @${commit.slice(0, 8)}` : body);
 				}}
 			/>
-			<output class="block space-y-1">
+			<output class="block space-y-2xs">
 				{#each submitted as body, i (i)}
 					<p>{body}</p>
 				{/each}
@@ -62,7 +62,7 @@
 
 <Story name="CommitPinned" args={{ pinToCommit: true }}>
 	{#snippet template(args)}
-		<div class="w-75 bg-background-default p-4">
+		<div class="w-75 bg-background-default p-md">
 			<PullReviewCommentForm {...args} />
 		</div>
 	{/snippet}
@@ -70,7 +70,7 @@
 
 <Story name="OneCodeReference" args={{ references: oneReference }}>
 	{#snippet template(args)}
-		<div class="w-85 bg-background-default p-4">
+		<div class="w-85 bg-background-default p-md">
 			<PullReviewCommentForm {...args} onremovereference={() => {}} />
 		</div>
 	{/snippet}
@@ -78,7 +78,7 @@
 
 <Story name="GrownDraft" args={{ allowPinToCommit: false, value: grownDraft }}>
 	{#snippet template(args)}
-		<div class="w-75 bg-background-default p-4">
+		<div class="w-75 bg-background-default p-md">
 			<PullReviewCommentForm {...args} />
 		</div>
 	{/snippet}
@@ -86,7 +86,7 @@
 
 <Story name="ManyCodeReferences" args={{ value: referencingDraft }}>
 	{#snippet template(args)}
-		<div class="w-85 bg-background-default p-4">
+		<div class="w-85 bg-background-default p-md">
 			<PullReviewCommentForm
 				{...args}
 				{references}
@@ -100,7 +100,7 @@
 
 <Story name="Failing">
 	{#snippet template(args)}
-		<div class="w-75 bg-background-default p-4">
+		<div class="w-75 bg-background-default p-md">
 			<PullReviewCommentForm
 				{...args}
 				onsubmit={() => {
diff --git a/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte b/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte
index ba778236a..64fc7fbed 100644
--- a/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte
+++ b/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte
@@ -18,6 +18,7 @@
 	import SendHorizontal from "$icon/send-horizontal";
 	import Code from "$icon/code";
 	import X from "$icon/x";
+	import { tv } from "tailwind-variants";
 	import { createAction } from "$lib/action.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Checkbox from "$lib/components/ui/Checkbox.svelte";
@@ -60,6 +61,35 @@
 	const lines = $derived(value.split("\n").length);
 	const grown = $derived(lines > 1);
 
+	const composerLayout = tv({
+		slots: {
+			container: "flex",
+			textarea: "min-w-0 flex-1",
+			button: "",
+			frame: "rounded-sm border bg-background-subtle p-2xs"
+		},
+		variants: {
+			grown: {
+				true: {
+					container: "flex-col",
+					textarea: "rounded-b-none",
+					button: "-mt-px h-9 w-full rounded-t-none disabled:border-border-default disabled:bg-background-default"
+				},
+				false: {
+					container: "items-stretch",
+					textarea: "rounded-r-none",
+					button: "-ml-px w-9.5 self-stretch [--btn-radius-l:0px] disabled:border-border-default disabled:bg-background-default"
+				}
+			},
+			disabled: {
+				true: { frame: "border-border-disabled" },
+				false: { frame: "border-border-default" }
+			}
+		}
+	});
+
+	const composerClasses = $derived(composerLayout({ grown, disabled }));
+
 	const pinnable = $derived(allowPinToCommit && references.length === 0);
 	const framed = $derived(references.length > 0 || pinnable);
 
@@ -87,7 +117,7 @@
 </script>
 
 {#snippet composer()}
-	<div class={grown ? "flex flex-col" : "flex items-stretch"}>
+	<div class={composerClasses.container()}>
 		<Textarea
 			bind:value
 			bind:element={field}
@@ -96,7 +126,7 @@
 			size="unsized"
 			rows={1}
 			onkeydown={handleKeydown}
-			class="min-w-0 flex-1 {grown ? 'rounded-b-none' : 'rounded-r-none'}"
+			class={composerClasses.textarea()}
 		/>
 		{#if grown}
 			<Button
@@ -104,7 +134,7 @@
 				icon={SendHorizontal}
 				iconSide="right"
 				size="small"
-				class="-mt-px h-9 w-full rounded-t-none disabled:border-border-default disabled:bg-background-default"
+				class={composerClasses.button()}
 				loading={publish.loading}
 				disabled={inert}
 			>
@@ -116,7 +146,7 @@
 				icon={SendHorizontal}
 				size="small"
 				aria-label="Send comment"
-				class="-ml-px w-9.5 self-stretch [--btn-radius-l:0px] disabled:border-border-default disabled:bg-background-default"
+				class={composerClasses.button()}
 				loading={publish.loading}
 				disabled={inert}
 			/>
@@ -124,19 +154,14 @@
 	</div>
 {/snippet}
 
-<form onsubmit={publish.run} class="flex flex-col gap-2">
+<form onsubmit={publish.run} class="flex flex-col gap-xs">
 	{#if framed}
-		<div
-			class={[
-				"rounded-sm border bg-background-subtle p-1",
-				disabled ? "border-border-disabled" : "border-border-default"
-			]}
-		>
+		<div class={composerClasses.frame()}>
 			{#if references.length > 0}
 				<ul>
 					{#each references as reference (reference.key)}
 						{@const range = referenceRange(reference.lines)}
-						<li class="flex h-10 items-center gap-2 px-1.5 typography-paragraph-small">
+						<li class="flex h-10 items-center gap-xs px-1.5 typography-paragraph-small">
 							<Code
 								class="size-3.5 shrink-0 text-foreground-subtle"
 								aria-hidden="true"
@@ -162,9 +187,11 @@
 					{/each}
 				</ul>
 			{:else}
-				<Checkbox bind:checked={pinToCommit} {disabled} class="h-8 px-1.5">
+				<Checkbox bind:checked={pinToCommit} {disabled} class="h-xl px-3xs pb-2xs">
 					<span class="typography-paragraph-small">
-						Comment on {short(currentCommit)}
+						Comment on <span class="typography-monospace-small"
+							>{short(currentCommit)}</span
+						>
 					</span>
 				</Checkbox>
 			{/if}
diff --git a/web/src/lib/components/repo/pulls/PullVersionList.stories.svelte b/web/src/lib/components/repo/pulls/PullVersionList.stories.svelte
index 2fa8f38a9..e5f830941 100644
--- a/web/src/lib/components/repo/pulls/PullVersionList.stories.svelte
+++ b/web/src/lib/components/repo/pulls/PullVersionList.stories.svelte
@@ -42,7 +42,7 @@
 
 <Story name="VersionSelector">
 	{#snippet template(args)}
-		<div class="flex items-start gap-4 bg-background-default p-4">
+		<div class="flex items-start gap-md bg-background-default p-md">
 			<PullVersionList
 				{...args}
 				range={viewed}
diff --git a/web/src/lib/components/repo/pulls/PullVersionList.svelte b/web/src/lib/components/repo/pulls/PullVersionList.svelte
index e7000dfc5..1874b8093 100644
--- a/web/src/lib/components/repo/pulls/PullVersionList.svelte
+++ b/web/src/lib/components/repo/pulls/PullVersionList.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Button from "$lib/components/ui/Button.svelte";
+	import Button, { buttonIcon } from "$lib/components/ui/Button.svelte";
 	import FileDiff from "$icon/file-diff";
 	import ChevronDown from "$icon/chevron-down";
 	import ArrowRight from "$icon/arrow-right";
@@ -37,16 +37,18 @@
 	const reset = () => commit({ start: latest, end: latest });
 
 	const short = (id: string) => id.slice(0, 8);
+
+	const triggerIcon = buttonIcon();
 </script>
 
 {#snippet versionRow(index: number, version: PullSubmission, actions: RowActions)}
 	<button
-		class="flex h-10 w-full items-center justify-between pr-2 pl-3 hover:cursor-pointer"
+		class="flex h-10 w-full items-center justify-between pr-xs pl-sm hover:cursor-pointer"
 		{...actions}
 	>
-		<div class="flex items-center gap-1">
+		<div class="flex items-center gap-2xs">
 			<span class="typography-monospace-regular">v{index}</span>
-			<Tag class="py-1 typography-monospace-small">{short(version.head)}</Tag>
+			<Tag class="py-2xs typography-monospace-small font-normal">{short(version.head)}</Tag>
 		</div>
 		<TimeAgo value={version.createdAt} class="text-foreground-muted" />
 	</button>
@@ -54,17 +56,17 @@
 
 <Dropdown id={menuId} variant="button" buttonVariant="default" align="right" menuClass="w-fit">
 	{#snippet trigger()}
-		<FileDiff class="size-4" />
+		<FileDiff class={triggerIcon} />
 		{#if range.end !== range.start}
 			<span>v{range.start}</span>
-			<ArrowRight class="size-3" aria-hidden="true" />
+			<ArrowRight class={triggerIcon} aria-hidden="true" />
 		{/if}
 		<span>v{range.end}</span>
-		<ChevronDown class="size-4" />
+		<ChevronDown class={triggerIcon} />
 	{/snippet}
-	<div class="w-72 bg-background-default p-2">
+	<div class="w-72 bg-background-default p-xs">
 		<!-- the header keeps its height when the reset button is away, so the list never jumps -->
-		<div class="mb-2 flex min-h-8 items-center justify-between pl-3">
+		<div class="mb-xs flex min-h-8 items-center justify-between pl-sm">
 			<h3 class="typography-paragraph-small font-medium text-foreground-default">Versions</h3>
 			{#if canReset}
 				<Button
-- 
2.51.2