From a093a2fc367459390dda10473cc6a1dd191f0c6e Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 30 Jul 2026 12:59:06 +0200
Subject: [PATCH] web/components: ease Button's press instead of snapping it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

the content wrapper had no transition, so the label jumped its 2px while the
::before shadow faded over 150ms — two halves of one press moving at different
speeds. transition-transform duration-150 ease-in-out matches the shadow
exactly: both resolve to 0.15s cubic-bezier(0.4, 0, 0.2, 1).

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/repo/RepoHeader.svelte | 14 +++++++-------
 web/src/lib/components/ui/Button.svelte       |  7 +++++--
 web/src/lib/components/ui/User.svelte         |  2 +-
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/web/src/lib/components/repo/RepoHeader.svelte b/web/src/lib/components/repo/RepoHeader.svelte
index b65a1c91..2354c520 100644
--- a/web/src/lib/components/repo/RepoHeader.svelte
+++ b/web/src/lib/components/repo/RepoHeader.svelte
@@ -72,7 +72,7 @@
 				<Button
 					href={resolve(`${base}/stars` as "/")}
 					variant="default"
-					insetShadow={true}
+					size="sm"
 					icon={Star}
 					title="Starred by"
 				>
@@ -81,15 +81,15 @@
 			{/if}
 
 			<ButtonGroup>
+				<Button href={resolve(`${base}/fork` as "/")} variant="default" size="sm" icon={GitFork}>
+					Fork
+				</Button>
 				<Button
-					href={resolve(`${base}/fork` as "/")}
+					href={resolve(`${base}/forks` as "/")}
 					variant="default"
-					insetShadow={true}
-					icon={GitFork}
+					size="sm"
+					title="Forked by"
 				>
-					Fork
-				</Button>
-				<Button href={resolve(`${base}/forks` as "/")} variant="ghost" title="Forked by">
 					{counts.forks}
 				</Button>
 			</ButtonGroup>
diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte
index 2b688795..e3fe8220 100644
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
@@ -136,8 +136,11 @@
 
 {#snippet content()}
 	<!-- single wrapper so the press animation moves the label/icon, not the button box.
-	     gap-[inherit] keeps the size variant's gap working across the extra level. -->
-	<span class="inline-flex min-w-0 items-center justify-center gap-[inherit]">
+	     gap-[inherit] keeps the size variant's gap working across the extra level, and the
+	     transition matches the ::before shadow's so both halves of the press ease together. -->
+	<span
+		class="inline-flex min-w-0 items-center justify-center gap-[inherit] transition-transform duration-150 ease-in-out"
+	>
 		{#if loading}
 			<Spinner class={spinnerSize} />
 		{:else}
diff --git a/web/src/lib/components/ui/User.svelte b/web/src/lib/components/ui/User.svelte
index 10ee5b69..e89b17b1 100644
--- a/web/src/lib/components/ui/User.svelte
+++ b/web/src/lib/components/ui/User.svelte
@@ -19,7 +19,7 @@
 					avatar: "size-[26px]"
 				},
 				regular: {
-					root: "gap-1.5",
+					root: "gap-1",
 					avatar: "size-[21px]"
 				},
 				small: {
-- 
2.51.2