From d0e8ae322fab5dbe488ecb22f152ad7cc4a80ea5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sat, 28 Feb 2026 17:33:03 +0100
Subject: [PATCH] style: move units into label text in KeyframeProperties
 SliderRow

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/animate/KeyframeProperties.tsx | 25 +++++++++++------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/components/animate/KeyframeProperties.tsx b/components/animate/KeyframeProperties.tsx
index c74eb23..7bf9e6c 100644
--- a/components/animate/KeyframeProperties.tsx
+++ b/components/animate/KeyframeProperties.tsx
@@ -29,7 +29,9 @@ function SliderRow({ label, unit, value, min, max, step = 1, onChange }: SliderR
   return (
     <div className="grid grid-cols-[1fr_auto] gap-x-3 items-center">
       <div className="space-y-1">
-        <Label className="text-[10px] text-muted-foreground">{label}</Label>
+        <Label className="text-[10px] text-muted-foreground">
+          {label}{unit && <span className="text-muted-foreground/50 ml-0.5">{unit}</span>}
+        </Label>
         <Slider
           min={min}
           max={max}
@@ -38,18 +40,15 @@ function SliderRow({ label, unit, value, min, max, step = 1, onChange }: SliderR
           onValueChange={([v]) => onChange(v)}
         />
       </div>
-      <div className="flex items-center gap-0.5 pt-4">
-        <Input
-          type="number"
-          min={min}
-          max={max}
-          step={step}
-          value={value}
-          onChange={(e) => onChange(Number(e.target.value))}
-          className="w-16 text-xs px-1.5 h-7"
-        />
-        {unit && <span className="text-[10px] text-muted-foreground">{unit}</span>}
-      </div>
+      <Input
+        type="number"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="w-16 text-xs px-1.5 h-7 mt-4"
+      />
     </div>
   );
 }