From 68abab6d05e923224203eee45d9add9ac682901d Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Tue, 18 Aug 2026 13:41:44 +0100
Subject: [PATCH] web/components: improve RepoHeader buttons

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../components/repo/RepoHeader.stories.svelte | 44 ++++++++++++++++++-
 web/src/lib/components/repo/RepoHeader.svelte |  1 +
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/repo/RepoHeader.stories.svelte b/web/src/lib/components/repo/RepoHeader.stories.svelte
index aac58e37c..eb6b8a247 100644
--- a/web/src/lib/components/repo/RepoHeader.stories.svelte
+++ b/web/src/lib/components/repo/RepoHeader.stories.svelte
@@ -1,9 +1,27 @@
 <script module lang="ts">
-	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
 	import StoryAuthProvider from "../../../../.storybook/StoryAuthProvider.svelte";
+	import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte";
 	import RepoHeader from "./RepoHeader.svelte";
+	import { expect } from "storybook/test";
 	import type { RepoInfo } from "./types";
 
+	type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas">;
+
+	// a ButtonGroup draws the border its segments give up, so it used to stand 2px
+	// taller than the bare star button next to it — signed out, that mismatch shows.
+	const actionsShareAHeight = async ({ canvas }: PlayContext) => {
+		const star = canvas.getAllByTitle("Starred by")[0];
+		const forkGroup = canvas.getAllByRole("link", { name: "Fork" })[0].parentElement!;
+		await expect(star.offsetHeight).toBe(forkGroup.offsetHeight);
+	};
+
+	const groupsShareAHeight = async ({ canvas }: PlayContext) => {
+		const starGroup = canvas.getAllByTitle("Starred by")[0].parentElement!;
+		const forkGroup = canvas.getAllByRole("link", { name: "Fork" })[0].parentElement!;
+		await expect(starGroup.offsetHeight).toBe(forkGroup.offsetHeight);
+	};
+
 	const repo: RepoInfo = {
 		uri: "at://did:plc:repo/sh.tangled.repo.repo/3jzrepo",
 		rkey: "3jzrepo",
@@ -27,7 +45,7 @@
 	});
 </script>
 
-<Story name="Full metadata" asChild>
+<Story name="Full metadata" asChild play={actionsShareAHeight}>
 	<StoryAuthProvider>
 		<RepoHeader {repo} {counts} />
 	</StoryAuthProvider>
@@ -45,3 +63,25 @@
 		<RepoHeader repo={{ ...repo, source: undefined }} {counts} />
 	</StoryAuthProvider>
 </Story>
+
+<Story name="Large counts" asChild>
+	<StoryAuthProvider>
+		<RepoHeader {repo} counts={{ stars: 128_400, issues: 1_020, pulls: 3_400, forks: 9_870 }} />
+	</StoryAuthProvider>
+</Story>
+
+<!-- signed in: star becomes a toggle group, so both action groups share a height -->
+<Story name="Signed in" asChild play={groupsShareAHeight}>
+	<MockAuthProvider>
+		<RepoHeader {repo} {counts} viewerStarRkey={null} />
+	</MockAuthProvider>
+</Story>
+<Story name="Signed in, starred" asChild>
+	<MockAuthProvider>
+		<RepoHeader
+			{repo}
+			counts={{ stars: 128_400, issues: 1_020, pulls: 3_400, forks: 9_870 }}
+			viewerStarRkey="3jzstar"
+		/>
+	</MockAuthProvider>
+</Story>
diff --git a/web/src/lib/components/repo/RepoHeader.svelte b/web/src/lib/components/repo/RepoHeader.svelte
index e2a9eff46..f2efbfdb9 100644
--- a/web/src/lib/components/repo/RepoHeader.svelte
+++ b/web/src/lib/components/repo/RepoHeader.svelte
@@ -42,6 +42,7 @@
 				href={resolve(`${base}/stars` as "/")}
 				variant="default"
 				size="small"
+				insetShadow={true}
 				icon={Star}
 				title="Starred by"
 			>
-- 
2.51.2