From b7609bdb309f0bb7eb34f39af250bebe7df2840b Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 8 Oct 2026 18:24:43 +0200
Subject: [PATCH] web/components: add mobile variant and hideLabelOnMobile to
 Button

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/ui/Button.svelte | 34 +++++++++++++++++++++++--
 web/src/theme.css                       |  2 ++
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte
index 6ef3ccff6..0b7a9e9ed 100644
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
@@ -68,6 +68,10 @@
 			square: {
 				true: "min-w-0 px-0",
 				false: ""
+			},
+			hideLabelOnMobile: {
+				true: "mobile:min-w-0 mobile:px-0",
+				false: ""
 			}
 		},
 		compoundVariants: [
@@ -75,6 +79,26 @@
 			{ square: true, size: "small", class: "w-[calc(1.75rem-var(--seg-inset,0px))]" },
 			{ square: true, size: "regular", class: "w-[calc(2rem-var(--seg-inset,0px))]" },
 			{ square: true, size: "large", class: "w-[calc(2.25rem-var(--seg-inset,0px))]" },
+			{
+				hideLabelOnMobile: true,
+				size: "mini",
+				class: "mobile:w-[calc(1.5rem-var(--seg-inset,0px))]"
+			},
+			{
+				hideLabelOnMobile: true,
+				size: "small",
+				class: "mobile:w-[calc(1.75rem-var(--seg-inset,0px))]"
+			},
+			{
+				hideLabelOnMobile: true,
+				size: "regular",
+				class: "mobile:w-[calc(2rem-var(--seg-inset,0px))]"
+			},
+			{
+				hideLabelOnMobile: true,
+				size: "large",
+				class: "mobile:w-[calc(2.25rem-var(--seg-inset,0px))]"
+			},
 			{ size: "mini", iconSide: "left", class: "pl-1" },
 			{ size: "mini", iconSide: "right", class: "pr-1" },
 			{ size: "small", iconSide: "left", class: "pl-1.75" },
@@ -88,7 +112,8 @@
 			variant: "default",
 			size: "regular",
 			iconSide: "none",
-			square: false
+			square: false,
+			hideLabelOnMobile: false
 		}
 	});
 
@@ -142,6 +167,7 @@
 		disabled?: boolean;
 		icon?: Component<SvelteHTMLElements["svg"]>;
 		iconSide?: "left" | "right";
+		hideLabelOnMobile?: boolean;
 		class?: string;
 		loading?: boolean;
 		holdToConfirm?: boolean;
@@ -160,6 +186,7 @@
 		disabled = false,
 		icon,
 		iconSide = "left",
+		hideLabelOnMobile = false,
 		class: className,
 		loading = false,
 		holdToConfirm = false,
@@ -176,6 +203,7 @@
 			size,
 			square: square ?? Boolean(icon && !children),
 			iconSide: icon && children ? iconSide : "none",
+			hideLabelOnMobile: Boolean(icon && children && hideLabelOnMobile),
 			class: className
 		})
 	);
@@ -364,7 +392,9 @@
 			{#if Icon && iconSide == "left"}
 				<Icon class={iconClasses} aria-hidden="true" />
 			{/if}
-			{#if children}
+			{#if children && Icon && hideLabelOnMobile}
+				<span class="mobile:sr-only">{@render children()}</span>
+			{:else if children}
 				{@render children()}
 			{/if}
 			{#if Icon && iconSide == "right"}
diff --git a/web/src/theme.css b/web/src/theme.css
index e9893abfb..ea77984f5 100644
--- a/web/src/theme.css
+++ b/web/src/theme.css
@@ -13,6 +13,8 @@
 	}
 }
 
+@custom-variant mobile (@media (pointer: coarse) and (width < 48rem));
+
 @theme {
 	--radius-sm: 0.375rem;
 	--radius-md: 0.5rem;
-- 
knotmirror 0.0.1