From 5d31243bbe7eb7197a23d7b3b06f8362e2bf3da4 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 30 Jul 2026 12:51:55 +0200
Subject: [PATCH] web/components: press Button's content, not the button itself
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

the raised variants moved the whole button down 2px on :active, so a pressed
button nudged its own box and anything laid out against it. the depth now reads
purely from the ::before shadow flip plus the label sinking: the translate moved
onto a wrapper span around the content, driven by active:*:translate-y-0.5.

the wrapper takes gap-[inherit] so the size variants' gap still applies across
the extra level, and geometry is unchanged — the sizes, loading and inset-shadow
stories measure identical button rects before and after.

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/ui/Button.svelte | 39 ++++++++++++++-----------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte
index b918b3fb..2b688795 100644
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
@@ -55,15 +55,16 @@
 			}
 		},
 		compoundVariants: [
-			// raised variants draw inset depth via a ::before layer.
+			// raised variants draw inset depth via a ::before layer. pressing shifts the
+			// content wrapper rather than the button itself, so the box stays put.
 			{
 				variant: "default",
 				insetShadow: true,
 				class: [
 					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)] before:transition-all before:duration-150 before:content-['']",
 					"hover:before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-strong-hover)]",
-					"active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-shadow-inner-subtle)]",
-					"disabled:active:translate-y-0"
+					"active:*:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-shadow-inner-subtle)]",
+					"disabled:active:*:translate-y-0"
 				]
 			},
 			{
@@ -71,8 +72,8 @@
 				insetShadow: true,
 				class: [
 					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:shadow-[inset_0_-2px_0_0_var(--color-alpha-dark-25)] before:transition-all before:duration-150 before:content-['']",
-					"active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-alpha-dark-50)]",
-					"disabled:active:translate-y-0"
+					"active:*:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-alpha-dark-50)]",
+					"disabled:active:*:translate-y-0"
 				]
 			}
 		],
@@ -134,19 +135,23 @@
 </script>
 
 {#snippet content()}
-	{#if loading}
-		<Spinner class={spinnerSize} />
-	{:else}
-		{#if Icon && iconSide == "left"}
-			<Icon class="{iconSize} shrink-0" aria-hidden="true" />
+	<!-- 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]">
+		{#if loading}
+			<Spinner class={spinnerSize} />
+		{:else}
+			{#if Icon && iconSide == "left"}
+				<Icon class="{iconSize} shrink-0" aria-hidden="true" />
+			{/if}
+			{#if children}
+				{@render children()}
+			{/if}
+			{#if Icon && iconSide == "right"}
+				<Icon class="{iconSize} shrink-0" aria-hidden="true" />
+			{/if}
 		{/if}
-		{#if children}
-			{@render children()}
-		{/if}
-		{#if Icon && iconSide == "right"}
-			<Icon class="{iconSize} shrink-0" aria-hidden="true" />
-		{/if}
-	{/if}
+	</span>
 {/snippet}
 
 {#if href}
-- 
2.51.2