From 6ce93797f6b89f844b584cb657fbf9f490d697ae Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 2 Sep 2026 10:50:44 +0200
Subject: [PATCH] web/ui: fold the Avatar and ButtonGroup classes into their
 variants

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/ui/Avatar.svelte      | 7 ++-----
 web/src/lib/components/ui/ButtonGroup.svelte | 8 ++------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/web/src/lib/components/ui/Avatar.svelte b/web/src/lib/components/ui/Avatar.svelte
index 723db07ac..0eec8af19 100644
--- a/web/src/lib/components/ui/Avatar.svelte
+++ b/web/src/lib/components/ui/Avatar.svelte
@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const avatar = tv({
-		base: "shrink-0 rounded-full border border-border-default",
+		base: "relative flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border-default bg-background-canvas text-foreground-subtle",
 		variants: {
 			size: {
 				mini: "size-3.25",
@@ -64,10 +64,7 @@
 </script>
 
 <span
-	class={avatar({
-		size,
-		class: `relative flex items-center justify-center overflow-hidden bg-background-canvas text-foreground-subtle ${className}`
-	})}
+	class={avatar({ size, class: className })}
 	role={handle ? "img" : undefined}
 	aria-label={handle ? `${handle}'s avatar` : undefined}
 	aria-hidden={handle ? undefined : "true"}
diff --git a/web/src/lib/components/ui/ButtonGroup.svelte b/web/src/lib/components/ui/ButtonGroup.svelte
index c23f75ff1..b4363b1d8 100644
--- a/web/src/lib/components/ui/ButtonGroup.svelte
+++ b/web/src/lib/components/ui/ButtonGroup.svelte
@@ -24,12 +24,8 @@
 				]
 			},
 			direction: {
-				horizontal: [
-					"",
-				],
-				vertical: [
-					"flex-col",
-				]
+				horizontal: [""],
+				vertical: ["flex-col"]
 			}
 		},
 		defaultVariants: {
-- 
2.51.2