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: {