From 27c7372a31bbf6aa8fac813249942c44f73f5424 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sat, 28 Feb 2026 17:13:47 +0100
Subject: [PATCH] style: match ToggleGroup style to QR preview (outline
 variant, h-6 compact items)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/animate/AnimationPreview.tsx | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/components/animate/AnimationPreview.tsx b/components/animate/AnimationPreview.tsx
index 16d689c..788e605 100644
--- a/components/animate/AnimationPreview.tsx
+++ b/components/animate/AnimationPreview.tsx
@@ -56,9 +56,9 @@ export function AnimationPreview({ config, element, onElementChange }: Props) {
     <Card className="h-full flex flex-col">
       <CardHeader className="flex flex-row items-center justify-between space-y-0">
         <CardTitle>Preview</CardTitle>
-        <ToggleGroup type="single" value={speed} onValueChange={(v) => v && setSpeed(v)}>
+        <ToggleGroup type="single" value={speed} onValueChange={(v) => v && setSpeed(v)} variant="outline" size="sm">
           {SPEEDS.map((s) => (
-            <ToggleGroupItem key={s.value} value={s.value} size="sm" className="text-xs px-2.5">
+            <ToggleGroupItem key={s.value} value={s.value} className="h-6 px-1.5 min-w-0 text-[10px]">
               {s.label}
             </ToggleGroupItem>
           ))}
@@ -102,20 +102,15 @@ export function AnimationPreview({ config, element, onElementChange }: Props) {
 
         {/* Controls */}
         <div className="flex items-center justify-between gap-3">
-          <ToggleGroup
-            type="single"
-            value={element}
-            onValueChange={(v) => v && onElementChange(v as PreviewElement)}
-            className="gap-1"
-          >
-            <ToggleGroupItem value="box" size="sm" title="Box">
-              <Square className="h-3.5 w-3.5" />
+          <ToggleGroup type="single" value={element} onValueChange={(v) => v && onElementChange(v as PreviewElement)} variant="outline" size="sm">
+            <ToggleGroupItem value="box" className="h-6 px-1.5 min-w-0" title="Box">
+              <Square className="h-3 w-3" />
             </ToggleGroupItem>
-            <ToggleGroupItem value="circle" size="sm" title="Circle">
-              <Circle className="h-3.5 w-3.5" />
+            <ToggleGroupItem value="circle" className="h-6 px-1.5 min-w-0" title="Circle">
+              <Circle className="h-3 w-3" />
             </ToggleGroupItem>
-            <ToggleGroupItem value="text" size="sm" title="Text">
-              <Type className="h-3.5 w-3.5" />
+            <ToggleGroupItem value="text" className="h-6 px-1.5 min-w-0" title="Text">
+              <Type className="h-3 w-3" />
             </ToggleGroupItem>
           </ToggleGroup>