From 2be11d8bb94d72732fc2382d882b0e97c1717356 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 29 Jul 2026 19:50:46 +0200
Subject: [PATCH] web/components: make the branch compare action a ghost button

the compare link was a hand-rolled anchor with its own text size and colour.
route it through Button with the ghost variant so it picks up the shared sizing,
hover and focus treatment.

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/repo/BranchList.svelte | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/repo/BranchList.svelte b/web/src/lib/components/repo/BranchList.svelte
index 6c0b47af..4cb8636c 100644
--- a/web/src/lib/components/repo/BranchList.svelte
+++ b/web/src/lib/components/repo/BranchList.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
 	import GitCompare from "$icon/git-compare";
+	import Button from "$lib/components/ui/Button.svelte";
 	import Tag from "$lib/components/ui/Tag.svelte";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import type { BranchSummary } from "./types";
@@ -41,16 +42,18 @@
 				{/if}
 			</div>
 			{#if branch.name !== currentRef}
-				<a
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={GitCompare}
 					href={resolve(
 						`${base}/compare/${encodeURIComponent(currentRef)}...${encodeURIComponent(branch.name)}` as "/"
 					)}
-					class="ml-2 flex shrink-0 items-center gap-1 text-xs text-foreground-muted"
+					class="ml-2 shrink-0"
 					title="Compare branches or tags"
 				>
-					<GitCompare class="size-3" aria-hidden="true" />
 					Compare
-				</a>
+				</Button>
 			{/if}
 		</div>
 	{/each}
-- 
2.51.2