From 3ba52331fbe4e9979d40efab9411133a928bceea Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 29 Jul 2026 23:59:46 +0200
Subject: [PATCH] web/components: drop the stale button height overrides

the star and fork controls hand-rolled their own joined-group wrapper and then
forced their buttons to min-h-7.5 to fit inside a max-h-8 box, so they came out
shorter than every other button on the platform. both now use ButtonGroup, which
does the radius collapsing and border overlap already, and the buttons keep
their own size, and the signed-out stars link becomes a Button instead of an
anchor styled to look like one.

measured on the repo header story: the stars control and the fork pair are both
34px now, where the pair used to be 36px and its segments 30px.

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/repo/RepoHeader.svelte | 29 +++++++------------
 web/src/lib/components/repo/StarButton.svelte | 12 ++++----
 2 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/web/src/lib/components/repo/RepoHeader.svelte b/web/src/lib/components/repo/RepoHeader.svelte
index e701fc84..f5486ff9 100644
--- a/web/src/lib/components/repo/RepoHeader.svelte
+++ b/web/src/lib/components/repo/RepoHeader.svelte
@@ -5,6 +5,7 @@
 	import Star from "$icon/star";
 	import Avatar from "$lib/components/ui/Avatar.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
+	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
 	import Tag from "$lib/components/ui/Tag.svelte";
 	import { getAuth } from "$lib/auth.svelte";
 	import StarButton from "./StarButton.svelte";
@@ -68,38 +69,30 @@
 					initialRkey={viewerStarRkey}
 				/>
 			{:else}
-				<a
+				<Button
 					href={resolve(`${base}/stars` as "/")}
-					class="inline-flex items-center gap-1.5 rounded border border-border-default px-2 py-1 text-sm text-foreground-muted no-underline hover:bg-background-subtle hover:no-underline"
+					variant="default"
+					size="sm"
+					icon={Star}
 					title="Starred by"
 				>
-					<Star class="size-4 shrink-0" aria-hidden="true" />
 					{counts.stars}
-				</a>
+				</Button>
 			{/if}
 
-			<div
-				class="inline-flex max-h-8 items-stretch divide-x divide-border-default overflow-clip rounded border border-border-default"
-			>
-				<Button
-					href={resolve(`${base}/fork` as "/")}
-					variant="default"
-					size="sm"
-					class="min-h-7.5 rounded-none border-0 before:rounded-none before:rounded-l-sm"
-				>
-					<GitFork class="size-4 shrink-0" aria-hidden="true" />
-					<span>Fork</span>
+			<ButtonGroup>
+				<Button href={resolve(`${base}/fork` as "/")} variant="default" size="sm" icon={GitFork}>
+					Fork
 				</Button>
 				<Button
 					href={resolve(`${base}/forks` as "/")}
-					variant="ghost"
+					variant="default"
 					size="sm"
-					class="min-h-7.5 rounded-none"
 					title="Forked by"
 				>
 					{counts.forks}
 				</Button>
-			</div>
+			</ButtonGroup>
 		</div>
 	</div>
 
diff --git a/web/src/lib/components/repo/StarButton.svelte b/web/src/lib/components/repo/StarButton.svelte
index 27e35530..54728a26 100644
--- a/web/src/lib/components/repo/StarButton.svelte
+++ b/web/src/lib/components/repo/StarButton.svelte
@@ -3,6 +3,7 @@
 	import { getAuth } from "$lib/auth.svelte";
 	import { createStar, deleteStar } from "$lib/api/graph";
 	import Button from "$lib/components/ui/Button.svelte";
+	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
 	import { getProfileCounts } from "$lib/components/profile/counts.svelte";
 	import { createOptimisticRelation, createOptimisticCount } from "$lib/optimistic.svelte";
 
@@ -61,13 +62,11 @@
 
 {#if signedIn && repoDid}
 	<div class="flex flex-col items-end">
-		<div
-			class="inline-flex max-h-8 items-stretch divide-x divide-border-default overflow-clip rounded border border-border-default"
-		>
+		<ButtonGroup>
 			<Button
 				variant="default"
 				size="sm"
-				class="min-h-7.5 flex-1 rounded-none border-0 before:rounded-none before:rounded-l-sm"
+				class="flex-1"
 				loading={busy}
 				disabled={!relation.known}
 				onclick={toggle}
@@ -80,14 +79,13 @@
 			</Button>
 			<Button
 				href={`/${repoOwnerHandle}/${repoName}/stars`}
-				variant="ghost"
+				variant="default"
 				size="sm"
-				class="min-h-7.5 rounded-none"
 				title="Starred by"
 			>
 				{starCount.value}
 			</Button>
-		</div>
+		</ButtonGroup>
 		{#if failed}
 			<p class="mt-1 text-xs text-foreground-danger">Something went wrong. Try again.</p>
 		{/if}
-- 
2.51.2