chore: cleanup

app/(app)/color/page.tsx

@@ -301,7 +301,7 @@ function PlaygroundContent() {
                       )}
                     </div>
                   ))}
-                  <Button onClick={addStop} variant="outline" size="sm" className="w-full">
+                  <Button onClick={addStop} variant="outline" className="w-full">
                     <Plus className="h-3.5 w-3.5 mr-1.5" />
                     Add Stop
                   </Button>

components/color/ExportMenu.tsx

@@ -119,12 +119,12 @@ export function ExportMenu({ colors, className }: ExportMenuProps) {
   return (
     <div className={className}>
       <div className="space-y-3">
-        <div className="flex gap-3">
+        <div className="flex flex-col md:flex-row gap-3">
           <Select
             value={format}
             onValueChange={(value) => setFormat(value as ExportFormat)}
           >
-            <SelectTrigger className="flex-1">
+            <SelectTrigger className="w-full md:flex-1">
               <SelectValue placeholder="Format" />
             </SelectTrigger>
             <SelectContent>
@@ -140,7 +140,7 @@ export function ExportMenu({ colors, className }: ExportMenuProps) {
             value={colorSpace}
             onValueChange={(value) => setColorSpace(value as ColorSpace)}
           >
-            <SelectTrigger className="flex-1">
+            <SelectTrigger className="w-full md:flex-1">
               <SelectValue placeholder="Space" />
             </SelectTrigger>
             <SelectContent>
@@ -166,7 +166,7 @@ export function ExportMenu({ colors, className }: ExportMenuProps) {
           </pre>
         </div>
 
-        <div className="flex flex-col md:flex-row gap-2">
+        <div className="flex flex-col md:flex-row gap-3">
           <Button onClick={handleCopy} variant="outline" className="w-full md:flex-1" disabled={isConverting}>
             {copied ? (
               <>

components/color/ManipulationPanel.tsx

@@ -178,7 +178,6 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
             <Button
               onClick={row.onApply}
               disabled={isLoading}
-              size="sm"
               variant="outline"
               className="shrink-0 w-16"
             >
@@ -194,7 +193,6 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
           disabled={isLoading}
           variant="outline"
           className="w-full"
-          size="sm"
         >
           <ArrowLeftRight className="h-3.5 w-3.5 mr-1.5" />
           Complementary Color

components/media/ConversionHistory.tsx

@@ -1,173 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { History, Trash2, ArrowRight, Clock } from 'lucide-react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { formatFileSize } from '@/lib/media/utils/fileUtils';
-import { getHistory, clearHistory, removeHistoryItem } from '@/lib/media/storage/history';
-import type { ConversionHistoryItem } from '@/types/media';
-
-export function ConversionHistory() {
-  const [history, setHistory] = React.useState<ConversionHistoryItem[]>([]);
-
-  // Load history on mount and listen for updates
-  React.useEffect(() => {
-    const loadHistory = () => {
-      const items = getHistory();
-      setHistory(items);
-    };
-
-    loadHistory();
-
-    // Listen for storage changes (e.g., from other tabs)
-    const handleStorageChange = (e: StorageEvent) => {
-      if (e.key === 'convert-ui-history') {
-        loadHistory();
-      }
-    };
-
-    // Listen for custom event (same-page updates)
-    const handleHistoryUpdate = () => {
-      loadHistory();
-    };
-
-    window.addEventListener('storage', handleStorageChange);
-    window.addEventListener('conversionHistoryUpdated', handleHistoryUpdate);
-
-    return () => {
-      window.removeEventListener('storage', handleStorageChange);
-      window.removeEventListener('conversionHistoryUpdated', handleHistoryUpdate);
-    };
-  }, []);
-
-  const handleClearHistory = () => {
-    if (confirm('Are you sure you want to clear all conversion history?')) {
-      clearHistory();
-      setHistory([]);
-    }
-  };
-
-  const handleRemoveItem = (id: string) => {
-    removeHistoryItem(id);
-    setHistory((prev) => prev.filter((item) => item.id !== id));
-  };
-
-  const formatTimestamp = (timestamp: number) => {
-    const date = new Date(timestamp);
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffMins = Math.floor(diffMs / 60000);
-    const diffHours = Math.floor(diffMs / 3600000);
-    const diffDays = Math.floor(diffMs / 86400000);
-
-    if (diffMins < 1) return 'Just now';
-    if (diffMins < 60) return `${diffMins} minute${diffMins > 1 ? 's' : ''} ago`;
-    if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
-    if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
-
-    return date.toLocaleDateString();
-  };
-
-  if (history.length === 0) {
-    return (
-      <div className="w-full max-w-4xl mx-auto">
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <History className="h-5 w-5" />
-              Conversion History
-            </CardTitle>
-            <CardDescription>Your recent conversions will appear here</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="text-center py-12 text-muted-foreground">
-              <History className="h-12 w-12 mx-auto mb-4 opacity-50" />
-              <p>No conversion history yet</p>
-              <p className="text-sm mt-1">Convert some files to see them here</p>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
-
-  return (
-    <div className="w-full max-w-4xl mx-auto">
-      <Card>
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <div>
-              <CardTitle className="flex items-center gap-2">
-                <History className="h-5 w-5" />
-                Conversion History
-              </CardTitle>
-              <CardDescription>
-                Recent conversions ({history.length} item{history.length > 1 ? 's' : ''})
-              </CardDescription>
-            </div>
-            <Button variant="outline" size="sm" onClick={handleClearHistory}>
-              <Trash2 className="h-4 w-4 mr-2" />
-              Clear All
-            </Button>
-          </div>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-3">
-            {history.map((item) => (
-              <div
-                key={item.id}
-                className="border border-border rounded-lg p-4 hover:bg-muted/50 transition-colors"
-              >
-                <div className="flex items-start justify-between gap-4">
-                  <div className="flex-1 min-w-0">
-                    {/* File conversion info */}
-                    <div className="flex items-center gap-2 mb-2">
-                      <span className="text-sm font-medium text-foreground truncate">
-                        {item.inputFileName}
-                      </span>
-                      <ArrowRight className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
-                      <span className="text-sm font-medium text-foreground truncate">
-                        {item.outputFileName}
-                      </span>
-                    </div>
-
-                    {/* Format conversion */}
-                    <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
-                      <span className="px-2 py-0.5 bg-muted rounded">
-                        {item.inputFormat}
-                      </span>
-                      <ArrowRight className="h-3 w-3" />
-                      <span className="px-2 py-0.5 bg-muted rounded">
-                        {item.outputFormat}
-                      </span>
-                      <span>•</span>
-                      <span>{formatFileSize(item.fileSize)}</span>
-                    </div>
-
-                    {/* Timestamp */}
-                    <div className="flex items-center gap-1 text-xs text-muted-foreground">
-                      <Clock className="h-3 w-3" />
-                      <span>{formatTimestamp(item.timestamp)}</span>
-                    </div>
-                  </div>
-
-                  {/* Remove button */}
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => handleRemoveItem(item.id)}
-                    className="flex-shrink-0"
-                  >
-                    <Trash2 className="h-4 w-4" />
-                    <span className="sr-only">Remove</span>
-                  </Button>
-                </div>
-              </div>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

components/units/MainConverter.tsx

@@ -157,7 +157,7 @@ export default function MainConverter() {
             </div>
             <Button
               variant="outline"
-              size="icon-xs"
+              size="icon"
               onClick={handleSwapUnits}
               className="shrink-0 w-full md:w-7"
               title="Swap units"