diff --git a/web/src/lib/components/repo/pulls/PullCommitList.stories.svelte b/web/src/lib/components/repo/pulls/PullCommitList.stories.svelte
index a701f60eb..60d14ac1f 100644
--- a/web/src/lib/components/repo/pulls/PullCommitList.stories.svelte
+++ b/web/src/lib/components/repo/pulls/PullCommitList.stories.svelte
@@ -79,7 +79,7 @@
 </script>
 
 {#snippet frame(args: Props)}
-	<Card padding="small" class="w-150">
+	<Card padding="small" class="w-full">
 		<PullCommitList {...args} />
 	</Card>
 {/snippet}
@@ -162,6 +162,85 @@
 	{/snippet}
 </Story>
 
+<!-- every adornment a row can carry at once: avatar, body toggle, CI, comments and a stat -->
+<Story
+	name="Everything on a row"
+	args={{
+		commits: commits.map((commit, i) => ({
+			...commit,
+			commentCount: [2, 0, 7, 1][i],
+			stat: [
+				{ insertions: 4, deletions: 9 },
+				{ insertions: 12, deletions: 3 },
+				{ insertions: 148, deletions: 0 },
+				{ insertions: 1, deletions: 1 }
+			][i]
+		})),
+		pipelineStatuses: Promise.resolve(
+			pipelinesByCommitHash(commits.map((commit) => commit.hash))
+		)
+	}}
+>
+	{#snippet template(args)}
+		{@render frame(args)}
+	{/snippet}
+</Story>
+
+<!-- the subject gives way first: it truncates so the counts and stats keep their columns -->
+<Story
+	name="Long commit messages"
+	args={{
+		commits: commits.map((commit, i) => ({
+			...commit,
+			subject: [
+				"web/components: rework the diff toolbar so the file tree, version picker and stat pill share one row without wrapping on narrow viewports",
+				"fix pierre hydrate leak on version switch by tearing the fill pool down inside the keyed block instead of on destroy",
+				"add interdiff change-id narrowing, including the url slot, the row focus handling and the fallback for repos without change ids",
+				commit.subject
+			][i],
+			commentCount: [2, 0, 7, 1][i],
+			stat: [
+				{ insertions: 4, deletions: 9 },
+				{ insertions: 12, deletions: 3 },
+				{ insertions: 148, deletions: 0 },
+				{ insertions: 1, deletions: 1 }
+			][i]
+		})),
+		pipelineStatuses: Promise.resolve(
+			pipelinesByCommitHash(commits.map((commit) => commit.hash))
+		)
+	}}
+>
+	{#snippet template(args)}
+		{@render frame(args)}
+	{/snippet}
+</Story>
+
+<!-- below the sm breakpoint a row keeps only the avatar and the subject -->
+<Story
+	name="Narrow screen"
+	globals={{ viewport: { value: "mobile1", isRotated: false } }}
+	args={{
+		commits: commits.map((commit, i) => ({
+			...commit,
+			commentCount: [2, 0, 7, 1][i],
+			stat: [
+				{ insertions: 4, deletions: 9 },
+				{ insertions: 12, deletions: 3 },
+				{ insertions: 148, deletions: 0 },
+				{ insertions: 1, deletions: 1 }
+			][i]
+		})),
+		pipelineStatuses: Promise.resolve(
+			pipelinesByCommitHash(commits.map((commit) => commit.hash))
+		)
+	}}
+>
+	{#snippet template(args)}
+		{@render frame(args)}
+	{/snippet}
+</Story>
+
 <Story
 	name="All changes selected"
 	args={{ selection: { mode: "change", changeId: "", onselect: () => {} } }}
@@ -182,7 +261,7 @@
 
 <Story name="Interactive range">
 	{#snippet template(args)}
-		<Card padding="small" class="w-150 space-y-2">
+		<Card padding="small" class="w-full space-y-2">
 			<PullCommitList
 				{...args}
 				selection={{
@@ -199,7 +278,7 @@
 
 <Story name="Interactive change">
 	{#snippet template(args)}
-		<Card padding="small" class="w-150 space-y-2">
+		<Card padding="small" class="w-full space-y-2">
 			<PullCommitList
 				{...args}
 				selection={{