diff --git a/web/src/lib/components/repo/PanelHeader.svelte b/web/src/lib/components/repo/PanelHeader.svelte
index 3130b6cae..7ba8edb20 100644
--- a/web/src/lib/components/repo/PanelHeader.svelte
+++ b/web/src/lib/components/repo/PanelHeader.svelte
@@ -10,21 +10,40 @@
 		icon: Component<SvelteHTMLElements["svg"]>;
 		count?: number;
 		approximate?: boolean;
+		compact?: boolean;
 	}
 
-	let { title, href, icon, count, approximate = false }: Props = $props();
+	let { title, href, icon, count, approximate = false, compact = false }: Props = $props();
 	const Glyph = $derived(icon);
+	const formattedCount = $derived(
+		count === undefined
+			? undefined
+			: approximate && count > 0
+				? `${formatCount(count)}+`
+				: formatCount(count)
+	);
 </script>
 
-<a
-	href={resolve(href as "/")}
-	class="flex items-center gap-2 pb-2 font-medium text-foreground-default no-underline hover:text-foreground-muted hover:no-underline"
->
-	<Glyph class="size-4 shrink-0" aria-hidden="true" />
-	{title}
-	{#if count !== undefined}
-		<span class="mt-px rounded-sm bg-background-inset px-1 typography-paragraph-small">
-			{approximate && count > 0 ? `${formatCount(count)}+` : formatCount(count)}
-		</span>
-	{/if}
-</a>
+{#if compact}
+	<a
+		href={resolve(href as "/")}
+		aria-label={title}
+		class="inline-flex items-center gap-1 typography-paragraph-small font-bold text-foreground-default no-underline hover:underline"
+	>
+		<Glyph class="size-4 shrink-0" aria-hidden="true" />
+		{formattedCount}
+	</a>
+{:else}
+	<a
+		href={resolve(href as "/")}
+		class="flex items-center gap-2 pb-2 font-medium text-foreground-default no-underline hover:text-foreground-muted hover:no-underline"
+	>
+		<Glyph class="size-4 shrink-0" aria-hidden="true" />
+		{title}
+		{#if count !== undefined}
+			<span class="mt-px rounded-sm bg-background-inset px-1 typography-paragraph-small">
+				{formattedCount}
+			</span>
+		{/if}
+	</a>
+{/if}
diff --git a/web/src/lib/components/repo/RepoToolbar.stories.svelte b/web/src/lib/components/repo/RepoToolbar.stories.svelte
index 0bd17a9e3..277a1ee48 100644
--- a/web/src/lib/components/repo/RepoToolbar.stories.svelte
+++ b/web/src/lib/components/repo/RepoToolbar.stories.svelte
@@ -21,7 +21,7 @@
 		args: {
 			repo,
 			ref: "main",
-			refs: { branches: ["main", "feature/storybook"], tags: ["v1.0.0"] },
+			refs: { branches: ["main", "feature/storybook"], tags: ["v1.0.0"], capped: false },
 			totalCommits: 42,
 			totalBranches: 2,
 			totalTags: 1,
@@ -34,5 +34,13 @@
 <Story name="Detached commit ref" args={{ ref: "0123456789abcdef", totalCommits: 1 }} />
 <Story
 	name="Repository has no tags"
-	args={{ refs: { branches: ["main"], tags: [] }, totalTags: 0 }}
+	args={{ refs: { branches: ["main"], tags: [], capped: false }, totalTags: 0 }}
+/>
+<Story
+	name="Capped ref counts"
+	args={{
+		refs: { branches: ["main"], tags: ["v1.0.0"], capped: true },
+		totalBranches: 100,
+		totalTags: 100
+	}}
 />
diff --git a/web/src/lib/components/repo/RepoToolbar.svelte b/web/src/lib/components/repo/RepoToolbar.svelte
index ea43b7381..b1e24d5e1 100644
--- a/web/src/lib/components/repo/RepoToolbar.svelte
+++ b/web/src/lib/components/repo/RepoToolbar.svelte
@@ -6,14 +6,14 @@
 	import Tags from "$icon/tags";
 	import Input from "$lib/components/ui/Input.svelte";
 	import CloneDropdown from "./CloneDropdown.svelte";
+	import PanelHeader from "./PanelHeader.svelte";
 	import RefSelector from "./RefSelector.svelte";
 	import type { RepoInfo } from "./types";
-	import { formatCount } from "$lib/format";
 
 	interface Props {
 		repo: RepoInfo;
 		ref: string;
-		refs: { branches: string[]; tags: string[] };
+		refs: { branches: string[]; tags: string[]; capped: boolean };
 		totalCommits: number;
 		totalBranches: number;
 		totalTags: number;
@@ -52,27 +52,31 @@
 	</form>
 
 	<div class="flex items-center gap-3">
-		<a
-			href={resolve(`${base}/commits/${encodedRef}` as "/")}
-			class="inline-flex items-center gap-1 typography-paragraph-small font-bold text-foreground-default no-underline hover:underline md:hidden"
-		>
-			<GitCommitHorizontal class="size-4" aria-hidden="true" />
-			{formatCount(totalCommits)}
-		</a>
-		<a
-			href={resolve(`${base}/branches` as "/")}
-			class="inline-flex items-center gap-1 typography-paragraph-small font-bold text-foreground-default no-underline hover:underline md:hidden"
-		>
-			<GitBranch class="size-4" aria-hidden="true" />
-			{formatCount(totalBranches)}
-		</a>
-		<a
-			href={resolve(`${base}/tags` as "/")}
-			class="inline-flex items-center gap-1 typography-paragraph-small font-bold text-foreground-default no-underline hover:underline md:hidden"
-		>
-			<Tags class="size-4" aria-hidden="true" />
-			{formatCount(totalTags)}
-		</a>
+		<div class="flex items-center gap-3 md:hidden">
+			<PanelHeader
+				compact
+				title="Commits"
+				icon={GitCommitHorizontal}
+				href={`${base}/commits/${encodedRef}`}
+				count={totalCommits}
+			/>
+			<PanelHeader
+				compact
+				title="Branches"
+				icon={GitBranch}
+				href={`${base}/branches`}
+				count={totalBranches}
+				approximate={refs.capped}
+			/>
+			<PanelHeader
+				compact
+				title="Tags"
+				icon={Tags}
+				href={`${base}/tags`}
+				count={totalTags}
+				approximate={refs.capped}
+			/>
+		</div>
 		<CloneDropdown {repo} {ref} {bobbinUrl} />
 	</div>
 </div>