diff --git a/components/animate/AnimationSettings.tsx b/components/animate/AnimationSettings.tsx
index 6ec20bd..56a840f 100644
--- a/components/animate/AnimationSettings.tsx
+++ b/components/animate/AnimationSettings.tsx
@@ -81,7 +81,7 @@ export function AnimationSettings({ config, onChange }: Props) {
                 step={50}
                 value={config.duration}
                 onChange={(e) => set('duration', Math.max(50, Number(e.target.value)))}
-                className="text-xs"
+               
               />
               <span className="text-xs text-muted-foreground shrink-0">ms</span>
             </div>
@@ -96,7 +96,7 @@ export function AnimationSettings({ config, onChange }: Props) {
                 step={50}
                 value={config.delay}
                 onChange={(e) => set('delay', Math.max(0, Number(e.target.value)))}
-                className="text-xs"
+               
               />
               <span className="text-xs text-muted-foreground shrink-0">ms</span>
             </div>
@@ -116,12 +116,12 @@ export function AnimationSettings({ config, onChange }: Props) {
               }
             }}
           >
-            <SelectTrigger className="text-xs">
+            <SelectTrigger className="w-full">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
               {EASINGS.map((e) => (
-                <SelectItem key={e.value} value={e.value} className="text-xs">
+                <SelectItem key={e.value} value={e.value}>
                   {e.label}
                 </SelectItem>
               ))}
@@ -183,14 +183,14 @@ export function AnimationSettings({ config, onChange }: Props) {
         <div className="space-y-1.5">
           <Label className="text-xs">Direction</Label>
           <Select value={config.direction} onValueChange={(v) => set('direction', v as AnimationConfig['direction'])}>
-            <SelectTrigger className="text-xs">
+            <SelectTrigger className="w-full">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="normal" className="text-xs">Normal</SelectItem>
-              <SelectItem value="reverse" className="text-xs">Reverse</SelectItem>
-              <SelectItem value="alternate" className="text-xs">Alternate</SelectItem>
-              <SelectItem value="alternate-reverse" className="text-xs">Alternate Reverse</SelectItem>
+              <SelectItem value="normal">Normal</SelectItem>
+              <SelectItem value="reverse">Reverse</SelectItem>
+              <SelectItem value="alternate">Alternate</SelectItem>
+              <SelectItem value="alternate-reverse">Alternate Reverse</SelectItem>
             </SelectContent>
           </Select>
         </div>
@@ -199,14 +199,14 @@ export function AnimationSettings({ config, onChange }: Props) {
         <div className="space-y-1.5">
           <Label className="text-xs">Fill Mode</Label>
           <Select value={config.fillMode} onValueChange={(v) => set('fillMode', v as AnimationConfig['fillMode'])}>
-            <SelectTrigger className="text-xs">
+            <SelectTrigger className="w-full">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="none" className="text-xs">None</SelectItem>
-              <SelectItem value="forwards" className="text-xs">Forwards</SelectItem>
-              <SelectItem value="backwards" className="text-xs">Backwards</SelectItem>
-              <SelectItem value="both" className="text-xs">Both</SelectItem>
+              <SelectItem value="none">None</SelectItem>
+              <SelectItem value="forwards">Forwards</SelectItem>
+              <SelectItem value="backwards">Backwards</SelectItem>
+              <SelectItem value="both">Both</SelectItem>
             </SelectContent>
           </Select>
         </div>