diff --git a/web/src/lib/components/repo/CommitLogView.stories.svelte b/web/src/lib/components/repo/CommitLogView.stories.svelte
index 24ef6c8c8..9ff60bb33 100644
--- a/web/src/lib/components/repo/CommitLogView.stories.svelte
+++ b/web/src/lib/components/repo/CommitLogView.stories.svelte
@@ -20,9 +20,13 @@
 	type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas">;
 
 	const firstPage = async ({ canvas }: PlayContext) => {
-		await expect(canvas.getByRole("button", { name: "Previous page" })).toBeDisabled();
+		// Pagination spends its arrows with aria-disabled, never the attribute
+		await expect(canvas.getByRole("button", { name: "Previous page" })).toHaveAttribute(
+			"aria-disabled",
+			"true"
+		);
 		const next = canvas.getByRole("button", { name: "Next page" });
-		await expect(next).toBeEnabled();
+		await expect(next).not.toHaveAttribute("aria-disabled");
 		await expect(canvas.getByRole("button", { name: "Page 1" })).toHaveAttribute(
 			"aria-current",
 			"page"
@@ -30,7 +34,8 @@
 		await userEvent.click(next);
 		await expect(onPageChange).toHaveBeenCalledWith(2);
 
-		await expect(canvas.getAllByTitle("Copy SHA")).toHaveLength(commits.length);
+		// desktop and mobile rows each render the sha cluster
+		await expect(canvas.getAllByTitle("Copy SHA")).toHaveLength(commits.length * 2);
 		await expect(canvas.getAllByTitle("Browse repository at this commit")).toHaveLength(
 			commits.length * 2
 		);
@@ -42,8 +47,12 @@
 	};
 
 	const middlePage = async ({ canvas }: PlayContext) => {
-		await expect(canvas.getByRole("button", { name: "Previous page" })).toBeEnabled();
-		await expect(canvas.getByRole("button", { name: "Next page" })).toBeEnabled();
+		await expect(canvas.getByRole("button", { name: "Previous page" })).not.toHaveAttribute(
+			"aria-disabled"
+		);
+		await expect(canvas.getByRole("button", { name: "Next page" })).not.toHaveAttribute(
+			"aria-disabled"
+		);
 		await expect(canvas.getByRole("button", { name: "Page 4" })).toHaveAttribute(
 			"aria-current",
 			"page"
diff --git a/web/src/lib/components/repo/CommitLogView.svelte b/web/src/lib/components/repo/CommitLogView.svelte
index b789231c7..92461c570 100644
--- a/web/src/lib/components/repo/CommitLogView.svelte
+++ b/web/src/lib/components/repo/CommitLogView.svelte
@@ -1,16 +1,11 @@
 <script lang="ts">
-	import { resolve } from "$app/paths";
-	import Ellipsis from "$icon/ellipsis";
-	import FolderCode from "$icon/folder-code";
-	import CopyButton from "$lib/components/ui/CopyButton.svelte";
 	import Pagination from "$lib/components/ui/Pagination.svelte";
-	import Pending from "$lib/components/ui/Pending.svelte";
-	import Tag from "$lib/components/ui/Tag.svelte";
-	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
-	import User from "$lib/components/ui/User.svelte";
 	import type { CommitStatuses } from "$lib/api/commitStatuses";
-	import PipelineWorkflows from "./pipelines/PipelineWorkflows.svelte";
+	import CommitRows from "./CommitRows.svelte";
+	import CommitRow from "./CommitRow.svelte";
 	import type { CommitSummary } from "./types";
+	import TabPanel from "../ui/TabPanel.svelte";
+	import GitCommitVertical from "$icon/git-commit-vertical";
 
 	interface Props {
 		ownerHandle: string;
@@ -35,200 +30,28 @@
 		pageCount,
 		onPageChange
 	}: Props = $props();
-
-	const base = $derived(`/${ownerHandle}/${repoName}`);
-
-	let expanded = $state<Record<string, boolean>>({});
 </script>
 
-{#snippet authorCell(commit: CommitSummary)}
-	<span class="flex items-center gap-1">
-		{#if commit.authorHandle}
-			<User did={commit.authorDid} handle={commit.authorHandle} link />
-		{:else if commit.authorName && commit.authorEmail && !commit.authorDid}
-			<a
-				href="mailto:{commit.authorEmail}"
-				class="inline-flex items-center text-inherit hover:underline"
-			>
-				<User handle={commit.authorName} />
-			</a>
-		{:else}
-			<User did={commit.authorDid} handle={commit.authorName} />
-		{/if}
-	</span>
-{/snippet}
-
-{#snippet shaChip(commit: CommitSummary, mobile: boolean)}
-	<a
-		href={resolve(`${base}/commit/${commit.hash}` as "/")}
-		title={commit.changeId ? `jj change id: ${commit.changeId}` : undefined}
-		class="flex items-center gap-2 rounded-sm bg-background-inset px-2 {mobile
-			? 'py-1'
-			: 'py-0.5'} no-underline hover:underline"
-	>
-		{commit.shortHash}
-	</a>
-{/snippet}
-
-{#snippet treeLink(commit: CommitSummary)}
-	<a
-		href={resolve(`${base}/tree/${commit.hash}` as "/")}
-		class="rounded-sm p-1 hover:bg-background-inset"
-		title="Browse repository at this commit"
-		aria-label="Browse repository at this commit"
-	>
-		<FolderCode class="size-4" aria-hidden="true" />
-	</a>
-{/snippet}
-
-{#snippet copyButton(commit: CommitSummary)}
-	<CopyButton value={commit.hash} size="mini" label="Copy SHA" title="Copy SHA" />
-{/snippet}
-
-{#snippet pipelineCell(commit: CommitSummary)}
-	{#if pipelineStatuses}
-		<span class="flex min-h-9 items-center">
-			<Pending>
-				{@const pipeline = (await pipelineStatuses)[commit.hash]}
-				{#if pipeline}
-					<PipelineWorkflows {ownerHandle} {repoName} {pipeline} />
-				{/if}
-			</Pending>
-		</span>
-	{/if}
-{/snippet}
-
-{#snippet messageCell(commit: CommitSummary)}
-	<div>
-		<a
-			href={resolve(`${base}/commit/${commit.hash}` as "/")}
-			class="text-foreground-default no-underline hover:underline"
-		>
-			{commit.subject}
-		</a>
-		{#if commit.body}
-			<button
-				type="button"
-				class="cursor-pointer rounded-sm bg-background-inset px-1 py-0.5 hover:bg-background-muted"
-				aria-expanded={expanded[commit.hash] === true}
-				aria-label="Toggle commit body"
-				onclick={() => (expanded[commit.hash] = !expanded[commit.hash])}
-			>
-				<Ellipsis class="size-3" aria-hidden="true" />
-			</button>
-		{/if}
-		{#if tagsByCommit}
-			<Pending>
-				{#each (await tagsByCommit)[commit.hash] ?? [] as name (name)}
-					<Tag color="gray" class="ml-2 font-mono">{name}</Tag>
-				{/each}
-			</Pending>
-		{/if}
-	</div>
-	{#if commit.body && expanded[commit.hash]}
-		<p class="mt-1 typography-paragraph-regular whitespace-pre-wrap text-foreground-muted">
-			{commit.body}
-		</p>
-	{/if}
-{/snippet}
-
-<section
-	id="commit-table"
-	class="overflow-x-auto rounded-sm border border-border-default bg-background-default px-6 py-4"
->
-	<h2 class="mb-4 typography-paragraph-regular font-bold">Commits</h2>
-
+<TabPanel padded={false}>
 	{#if commits.length === 0}
 		<p class="py-6 text-center text-foreground-subtle">No commits at {ref}.</p>
 	{:else}
-		<div class="hidden divide-y divide-border-default md:flex md:flex-col">
-			<div class="grid grid-cols-16 gap-4">
-				<div
-					class="col-span-3 py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
-				>
-					Author
-				</div>
-				<div
-					class="col-span-3 py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
-				>
-					Commit
-				</div>
-				<div
-					class="col-span-7 py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
-				>
-					Message
-				</div>
-				<div
-					class="col-span-1 py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
-				>
-					<span>Pipeline</span>
-				</div>
-				<div
-					class="col-span-2 justify-self-end py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
-				>
-					Date
-				</div>
-			</div>
-			{#each commits as commit (commit.hash)}
-				<div class="grid grid-cols-16 items-center gap-4 py-3">
-					<div class="col-span-3 align-top">
-						{@render authorCell(commit)}
-					</div>
-					<div class="col-span-3 flex items-start align-top font-mono">
-						{@render shaChip(commit, false)}
-						<!-- TODO: unverified rows indent the actions by a verified-shield
-							width, but no shield renders yet. drop the ml-6 or render the
-							shield once commit verification lands -->
-						<div class="ml-6 inline-flex">
-							{@render copyButton(commit)}
-							{@render treeLink(commit)}
-						</div>
-					</div>
-					<div class="col-span-7 align-top">
-						{@render messageCell(commit)}
-					</div>
-					<div class="col-span-1 flex items-start align-top">
-						{@render pipelineCell(commit)}
-					</div>
-					<div class="col-span-2 justify-self-end align-top text-foreground-muted">
-						<TimeAgo value={commit.when} />
-					</div>
-				</div>
-			{/each}
-		</div>
+		<h2 class="flex flex-wrap items-center gap-2 p-4 typography-paragraph-regular font-medium">
+			<GitCommitVertical class="size-4 shrink-0" aria-hidden="true" />
+			Commits on
+			<span
+				class="flex min-w-0 rounded-sm bg-background-inset px-1 typography-monospace-regular text-foreground-default"
+				>{ref}</span
+			>
+		</h2>
 
-		<div class="md:hidden">
-			{#each commits as commit, index (commit.hash)}
-				<div
-					class="relative mb-2 p-2 {index < commits.length - 1
-						? 'border-b border-border-default'
-						: ''}"
-				>
-					<div class="flex items-center justify-between">
-						<div class="flex-1">
-							{@render messageCell(commit)}
-						</div>
-						{@render treeLink(commit)}
-					</div>
-					<div
-						class="mt-2 flex items-center gap-1 typography-paragraph-small text-foreground-muted"
-					>
-						<span class="font-mono">
-							{@render shaChip(commit, true)}
-						</span>
-						<span aria-hidden="true">&middot;</span>
-						{@render authorCell(commit)}
-						{#if commit.when}
-							<span aria-hidden="true">&middot;</span>
-							<TimeAgo value={commit.when} class="shrink-0 whitespace-nowrap" />
-						{/if}
-						{@render pipelineCell(commit)}
-					</div>
-				</div>
+		<CommitRows class="divide-y divide-border-default border-t border-border-default">
+			{#each commits as commit (commit.hash)}
+				<CommitRow {ownerHandle} {repoName} {commit} {tagsByCommit} {pipelineStatuses} />
 			{/each}
-		</div>
+		</CommitRows>
 	{/if}
-</section>
+</TabPanel>
 
 {#if pageCount > 1}
 	<div class="mt-4 flex justify-center">
diff --git a/web/src/lib/components/repo/CommitRow.stories.svelte b/web/src/lib/components/repo/CommitRow.stories.svelte
new file mode 100644
index 000000000..ebbd4575f
--- /dev/null
+++ b/web/src/lib/components/repo/CommitRow.stories.svelte
@@ -0,0 +1,80 @@
+<script module lang="ts">
+	import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
+	import { expect, userEvent } from "storybook/test";
+	import CommitRows from "./CommitRows.svelte";
+	import CommitRow from "./CommitRow.svelte";
+	import { pipelinesByCommitHash } from "$fixtures/pipelines";
+	import type { CommitSummary } from "./types";
+
+	const commit: CommitSummary = {
+		hash: "0123456789abcdef0123456789abcdef01234567",
+		shortHash: "01234567",
+		subject: "web/repo: share one commit row between the log and file history",
+		body: "a longer explanation hidden behind the disclosure.",
+		authorName: "dawn",
+		authorEmail: "dawn@tangled.org",
+		when: "2026-08-29T09:00:00Z"
+	};
+	type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas">;
+
+	const cells = async ({ canvas }: PlayContext) => {
+		// desktop and mobile rows each render the sha cluster
+		await expect(canvas.getAllByTitle("Copy SHA")).toHaveLength(2);
+		const chip = canvas.getAllByRole("link", { name: commit.shortHash })[0];
+		await expect(chip).toHaveAttribute("href", `/dawn/tangled/commit/${commit.hash}`);
+		const tree = canvas.getAllByTitle("Browse repository at this commit")[0];
+		await expect(tree).toHaveAttribute("href", `/dawn/tangled/tree/${commit.hash}`);
+	};
+
+	const bodyExpand = async ({ canvas }: PlayContext) => {
+		const toggle = canvas.getAllByRole("button", { name: "Toggle commit body" })[0];
+		await expect(canvas.queryByText(/a longer explanation/)).toBeNull();
+		await userEvent.click(toggle);
+		await expect(toggle).toHaveAttribute("aria-expanded", "true");
+		await expect(canvas.getByText(/a longer explanation/)).toBeVisible();
+	};
+
+	const { Story } = defineMeta({
+		title: "Repo/CommitRow",
+		component: CommitRow,
+		tags: ["autodocs"],
+		args: {
+			ownerHandle: "dawn",
+			repoName: "tangled",
+			commit
+		}
+	});
+
+	// a row is a subgrid of CommitRows' columns, so it needs that grid around it
+	const frame = "divide-y divide-border-default border-y border-border-default";
+</script>
+
+<Story name="Default" play={cells}>
+	{#snippet template(args)}
+		<CommitRows class={frame}><CommitRow {...args} /></CommitRows>
+	{/snippet}
+</Story>
+
+<Story name="Expandable body" play={bodyExpand}>
+	{#snippet template(args)}
+		<CommitRows class={frame}><CommitRow {...args} /></CommitRows>
+	{/snippet}
+</Story>
+
+<Story
+	name="With tags and pipeline"
+	args={{
+		tagsByCommit: { [commit.hash]: ["v1.0.0"] },
+		pipelineStatuses: Promise.resolve(pipelinesByCommitHash([commit.hash]))
+	}}
+>
+	{#snippet template(args)}
+		<CommitRows class={frame}><CommitRow {...args} /></CommitRows>
+	{/snippet}
+</Story>
+
+<Story name="Unresolved author" args={{ commit: { ...commit, authorHandle: undefined, body: "" } }}>
+	{#snippet template(args)}
+		<CommitRows class={frame}><CommitRow {...args} /></CommitRows>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/repo/CommitRow.svelte b/web/src/lib/components/repo/CommitRow.svelte
new file mode 100644
index 000000000..c9f0cc7de
--- /dev/null
+++ b/web/src/lib/components/repo/CommitRow.svelte
@@ -0,0 +1,177 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import Ellipsis from "$icon/ellipsis";
+	import FolderCode from "$icon/folder-code";
+	import Button from "$lib/components/ui/Button.svelte";
+	import CopyButton from "$lib/components/ui/CopyButton.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
+	import Tag from "$lib/components/ui/Tag.svelte";
+	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
+	import User from "$lib/components/ui/User.svelte";
+	import type { CommitStatuses } from "$lib/api/commitStatuses";
+	import PipelineWorkflows from "./pipelines/PipelineWorkflows.svelte";
+	import type { CommitSummary } from "./types";
+
+	interface Props {
+		ownerHandle: string;
+		repoName: string;
+		commit: CommitSummary;
+		tagsByCommit?: Record<string, string[]> | Promise<Record<string, string[]>>;
+		pipelineStatuses?: Promise<CommitStatuses>;
+		class?: string;
+	}
+
+	let {
+		ownerHandle,
+		repoName,
+		commit,
+		tagsByCommit,
+		pipelineStatuses,
+		class: className
+	}: Props = $props();
+
+	const base = $derived(`/${ownerHandle}/${repoName}`);
+	const commitHref = $derived(resolve(`${base}/commit/${commit.hash}` as "/"));
+	const treeHref = $derived(resolve(`${base}/tree/${commit.hash}` as "/"));
+
+	let expanded = $state(false);
+</script>
+
+{#snippet author()}
+	<span class="flex min-w-0 items-center gap-1">
+		<!-- an author we resolved to an account gets their handle and a link to it.
+		a plain email address resolves to nobody, so the git name stays and the chip
+		mails them instead -->
+		{#if commit.authorHandle}
+			<User did={commit.authorDid} handle={commit.authorHandle} class="min-w-0" link />
+		{:else if commit.authorName && commit.authorEmail && !commit.authorDid}
+			<a
+				href="mailto:{commit.authorEmail}"
+				class="inline-flex min-w-0 items-center text-inherit hover:underline"
+			>
+				<User handle={commit.authorName} class="min-w-0" />
+			</a>
+		{:else}
+			<User did={commit.authorDid} handle={commit.authorName} class="min-w-0" />
+		{/if}
+	</span>
+{/snippet}
+
+{#snippet sha()}
+	<a
+		href={commitHref}
+		title={commit.changeId ? `jj change id: ${commit.changeId}` : undefined}
+		class="rounded-sm bg-background-inset px-1 typography-monospace-small text-foreground-default no-underline hover:underline"
+	>
+		{commit.shortHash}
+	</a>
+{/snippet}
+
+{#snippet actions()}
+	<span class="flex items-center gap-2">
+		<div class="flex flex-row gap-0">
+			<CopyButton
+				value={commit.hash}
+				label="Copy SHA"
+				title="Copy SHA"
+				class="fill-foreground-muted stroke-foreground-muted text-foreground-muted"
+			/>
+			<Button
+				variant="ghost"
+				size="small"
+				href={treeHref}
+				title="Browse repository at this commit"
+				aria-label="Browse repository at this commit"
+				icon={FolderCode}
+				class="fill-foreground-muted stroke-foreground-muted text-foreground-muted"
+			/>
+		</div>
+	</span>
+{/snippet}
+
+{#snippet subject()}
+	<span class="flex min-w-0 items-center gap-2">
+		<a href={commitHref} class="truncate text-foreground-default no-underline hover:underline">
+			{commit.subject}
+		</a>
+		{#if commit.body}
+			<button
+				type="button"
+				class="shrink-0 cursor-pointer rounded-sm bg-background-inset px-1 hover:bg-background-muted"
+				aria-expanded={expanded}
+				aria-label="Toggle commit body"
+				onclick={() => (expanded = !expanded)}
+			>
+				<Ellipsis class="size-3" aria-hidden="true" />
+			</button>
+		{/if}
+		{#if tagsByCommit}
+			<Pending>
+				{#each (await tagsByCommit)[commit.hash] ?? [] as name (name)}
+					<Tag color="gray" class="shrink-0 font-mono">{name}</Tag>
+				{/each}
+			</Pending>
+		{/if}
+	</span>
+{/snippet}
+
+{#snippet pipeline()}
+	{#if pipelineStatuses}
+		<span class="flex min-h-9 items-center">
+			<Pending>
+				{@const status = (await pipelineStatuses)[commit.hash]}
+				{#if status}
+					<PipelineWorkflows {ownerHandle} {repoName} pipeline={status} />
+				{/if}
+			</Pending>
+		</span>
+	{/if}
+{/snippet}
+
+{#snippet when()}
+	<TimeAgo value={commit.when} class="shrink-0 whitespace-nowrap text-foreground-muted" />
+{/snippet}
+
+<!--
+	only the columns come from CommitRows; the rows are the row's own, so the cells
+	keep a comfortable height and an expanded body drops underneath them.
+-->
+<div
+	class="{className} px-4 md:col-span-full md:grid md:grid-cols-subgrid md:grid-rows-[minmax(3rem,auto)] md:items-center"
+>
+	<div class="hidden md:contents">
+		{@render author()}
+		<span class="flex flex-row items-center gap-2">
+			{@render actions()}
+			{@render sha()}
+		</span>
+		{@render subject()}
+		<span class="flex flex-row items-center gap-2 justify-self-end">
+			{@render pipeline()}
+			{@render when()}
+		</span>
+	</div>
+
+	<div class="flex flex-col gap-2 py-4 text-foreground-muted md:hidden">
+		{@render subject()}
+		<div class="flex items-center justify-between gap-2">
+			{@render author()}
+			<span class="flex flex-row items-center gap-2">
+				{@render pipeline()}
+				{@render actions()}
+			</span>
+		</div>
+		<div class="flex items-center justify-between gap-2">
+			{@render sha()}
+			{@render when()}
+		</div>
+	</div>
+
+	{#if commit.body && expanded}
+		<p
+			class="pb-2 typography-paragraph-small whitespace-pre-wrap text-foreground-muted md:col-span-full"
+		>
+			{commit.body}
+		</p>
+	{/if}
+</div>
diff --git a/web/src/lib/components/repo/CommitRows.svelte b/web/src/lib/components/repo/CommitRows.svelte
new file mode 100644
index 000000000..87528a73b
--- /dev/null
+++ b/web/src/lib/components/repo/CommitRows.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		columns?: string;
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		columns = "md:grid-cols-[minmax(0,3fr)_max-content_minmax(0,7fr)_max-content]",
+		class: className,
+		children
+	}: Props = $props();
+</script>
+
+<!--
+	the list owns the columns and every row subscribes to them with subgrid, so the
+	trailing column measures the widest pipeline-and-timestamp cell in the whole
+	list instead of the one cell in its own row. a page where nothing ran ci
+	collapses that column down to the timestamp alone.
+-->
+<div class="{className} md:grid md:gap-x-6 {columns}">
+	{@render children()}
+</div>
diff --git a/web/src/lib/components/repo/FileHistoryView.svelte b/web/src/lib/components/repo/FileHistoryView.svelte
index 4c6266aeb..1b05299e2 100644
--- a/web/src/lib/components/repo/FileHistoryView.svelte
+++ b/web/src/lib/components/repo/FileHistoryView.svelte
@@ -1,14 +1,9 @@
 <script lang="ts">
-	import { resolve } from "$app/paths";
-	import Ellipsis from "$icon/ellipsis";
-	import FolderCode from "$icon/folder-code";
 	import History from "$icon/history";
-	import Button from "$lib/components/ui/Button.svelte";
-	import CopyButton from "$lib/components/ui/CopyButton.svelte";
 	import Pagination from "$lib/components/ui/Pagination.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
-	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
-	import User from "$lib/components/ui/User.svelte";
+	import CommitRows from "./CommitRows.svelte";
+	import CommitRow from "./CommitRow.svelte";
 	import type { CommitSummary } from "./types";
 	import { baseName, blobHref } from "./urls";
 
@@ -26,8 +21,6 @@
 	let { ownerHandle, repoName, ref, path, commits, page, pageCount, onPageChange }: Props =
 		$props();
 
-	const base = $derived(`/${ownerHandle}/${repoName}`);
-
 	const month = new Intl.DateTimeFormat("en", { month: "long", year: "numeric" });
 	const monthOf = (when: string): string => {
 		const date = new Date(when);
@@ -47,123 +40,24 @@
 		return cut;
 	});
 
-	let expanded = $state<Record<string, boolean>>({});
-
 	const fileName = $derived(baseName(path));
 	const parentPath = $derived(path.slice(0, path.length - fileName.length));
 </script>
 
-{#snippet author(commit: CommitSummary)}
-	<span class="flex min-w-0 items-center gap-1">
-		{#if commit.authorHandle}
-			<User did={commit.authorDid} handle={commit.authorHandle} class="min-w-0" link />
-		{:else if commit.authorName && commit.authorEmail && !commit.authorDid}
-			<a
-				href="mailto:{commit.authorEmail}"
-				class="inline-flex min-w-0 items-center text-inherit hover:underline"
-			>
-				<User handle={commit.authorName} class="min-w-0" />
-			</a>
-		{:else}
-			<User did={commit.authorDid} handle={commit.authorName} class="min-w-0" />
-		{/if}
-	</span>
-{/snippet}
-
-{#snippet info(commit: CommitSummary)}
-	<span class="flex items-center gap-2">
-		<a
-			href={resolve(`${base}/commit/${commit.hash}` as "/")}
-			title={commit.changeId ? `jj change id: ${commit.changeId}` : undefined}
-			class="rounded-sm bg-background-inset px-1 typography-monospace-small text-foreground-default no-underline hover:underline"
-		>
-			{commit.shortHash}
-		</a>
-		<div class="flex flex-row gap-0">
-			<CopyButton
-				value={commit.hash}
-				label="Copy SHA"
-				title="Copy SHA"
-				class="fill-foreground-muted stroke-foreground-muted text-foreground-muted"
-			/>
-			<Button
-				variant="ghost"
-				size="small"
-				href={resolve(`${base}/tree/${commit.hash}` as "/")}
-				title="Browse repository at this commit"
-				aria-label="Browse repository at this commit"
-				icon={FolderCode}
-				class="fill-foreground-muted stroke-foreground-muted text-foreground-muted"
-			/>
-		</div>
-	</span>
-{/snippet}
-
-{#snippet subject(commit: CommitSummary)}
-	<span class="flex min-w-0 items-center gap-2">
-		<a
-			href={resolve(`${base}/commit/${commit.hash}` as "/")}
-			class="truncate text-foreground-default no-underline hover:underline"
-		>
-			{commit.subject}
-		</a>
-		{#if commit.body}
-			<button
-				type="button"
-				class="shrink-0 cursor-pointer rounded-sm bg-background-inset px-1 hover:bg-background-muted"
-				aria-expanded={expanded[commit.hash] === true}
-				aria-label="Toggle commit body"
-				onclick={() => (expanded[commit.hash] = !expanded[commit.hash])}
-			>
-				<Ellipsis class="size-3" aria-hidden="true" />
-			</button>
-		{/if}
-	</span>
-{/snippet}
-
-{#snippet when(commit: CommitSummary)}
-	<TimeAgo value={commit.when} class="shrink-0 whitespace-nowrap text-foreground-muted" />
-{/snippet}
-
-{#snippet row(commit: CommitSummary)}
-	<div class="px-4">
-		<div
-			class="hidden md:grid md:min-h-12 md:grid-cols-[minmax(0,2fr)_max-content_minmax(0,5fr)_max-content] md:items-center md:gap-x-6"
-		>
-			{@render author(commit)}
-			{@render info(commit)}
-			{@render subject(commit)}
-			<span class="justify-self-end">{@render when(commit)}</span>
-		</div>
-
-		<div class="flex flex-col gap-1 py-2 md:hidden">
-			{@render subject(commit)}
-			<div class="flex flex-wrap items-center gap-2 text-foreground-muted">
-				{@render author(commit)}
-				{@render info(commit)}
-				{@render when(commit)}
-			</div>
-		</div>
-
-		{#if commit.body && expanded[commit.hash]}
-			<p class="pb-2 typography-paragraph-small whitespace-pre-wrap text-foreground-muted">
-				{commit.body}
-			</p>
-		{/if}
-	</div>
-{/snippet}
-
 <TabPanel padded={false} class="pb-6">
-	<h2 class="flex flex-wrap items-center gap-2 p-4 typography-paragraph-regular font-medium">
+	<h2
+		class="flex flex-wrap items-center gap-2 p-4 pb-8 typography-paragraph-regular font-medium md:pb-4"
+	>
 		<History class="size-4 shrink-0" aria-hidden="true" />
 		Version history of
 		<a
 			href={blobHref(ownerHandle, repoName, ref, path)}
 			title={path}
 			aria-label={path}
-			class="flex min-w-0 rounded-sm bg-background-inset px-1 typography-monospace-regular font-normal text-foreground-default no-underline hover:underline"
-			>{#if parentPath}<span class="truncate text-foreground-muted">{parentPath}</span
-				>{/if}<span class="shrink-0">{fileName}</span></a
+			class="flex min-w-0 rounded-sm bg-background-inset px-1 typography-monospace-regular text-foreground-default no-underline hover:underline"
+			>{#if parentPath}<span class="truncate">{parentPath}</span>{/if}<span class="shrink-0"
+				>{fileName}</span
+			></a
 		>
 	</h2>
 
@@ -172,17 +66,19 @@
 			No commits touch this file at {ref}.
 		</p>
 	{:else}
-		<div class="flex flex-col gap-6">
+		<div class="flex flex-col gap-8 md:gap-6">
 			{#each groups as group (group.commits[0].hash)}
 				<div class="flex flex-col">
 					<h3 class="px-4 pb-1 typography-paragraph-regular text-foreground-muted">
 						{group.label}
 					</h3>
-					<div class="mt-2 divide-y divide-border-default border-y border-border-default">
+					<CommitRows
+						class="mt-2 divide-y divide-border-default border-y border-border-default"
+					>
 						{#each group.commits as commit (commit.hash)}
-							{@render row(commit)}
+							<CommitRow {ownerHandle} {repoName} {commit} />
 						{/each}
-					</div>
+					</CommitRows>
 				</div>
 			{/each}
 		</div>