feat: align units converter header into a single row

- Move unit search into the CardHeader
- Align title, search, and category selector into one row using flexbox
- Update SearchUnits component to allow custom class names and remove hardcoded max-width

components/units/converter/MainConverter.tsx

@@ -120,14 +120,19 @@ export default function MainConverter() {
 
       {/* Main Converter Card */}
       <Card>
-        <CardHeader>
+        <CardHeader className="pb-4 border-b">
-          <div className="flex items-center justify-between">
+          <div className="flex flex-col md:flex-row md:items-center gap-4 justify-between">
-            <CardTitle>Convert {formatMeasureName(selectedMeasure)}</CardTitle>
+            <CardTitle className="shrink-0">Convert {formatMeasureName(selectedMeasure)}</CardTitle>
-            <div className="w-48">
+            
+            <div className="flex-1 max-w-md">
+              <SearchUnits onSelectUnit={handleSearchSelect} />
+            </div>
+
+            <div className="w-full md:w-48 shrink-0">
               <Select
                 value={selectedMeasure}
                 onChange={(e) => setSelectedMeasure(e.target.value as Measure)}
-                className="h-9 text-xs"
+                className="h-10 text-sm"
                 style={{
                   borderLeft: `4px solid ${getCategoryColorHex(selectedMeasure)}`,
                 }}
@@ -141,12 +146,7 @@ export default function MainConverter() {
             </div>
           </div>
         </CardHeader>
-        <CardContent className="space-y-6">
+        <CardContent className="space-y-6 pt-6">
-          {/* Quick Search */}
-          <div className="flex justify-center pb-2 border-b">
-            <SearchUnits onSelectUnit={handleSearchSelect} />
-          </div>
-
           <div className="flex gap-2 items-end">
             <div className="flex-1">
               <label className="text-sm font-medium mb-2 block">Value</label>

components/units/converter/SearchUnits.tsx

@@ -24,9 +24,10 @@ interface SearchResult {
 
 interface SearchUnitsProps {
   onSelectUnit: (unit: string, measure: Measure) => void;
+  className?: string;
 }
 
-export default function SearchUnits({ onSelectUnit }: SearchUnitsProps) {
+export default function SearchUnits({ onSelectUnit, className }: SearchUnitsProps) {
   const [query, setQuery] = useState('');
   const [results, setResults] = useState<SearchResult[]>([]);
   const [isOpen, setIsOpen] = useState(false);
@@ -133,7 +134,7 @@ export default function SearchUnits({ onSelectUnit }: SearchUnitsProps) {
   };
 
   return (
-    <div ref={containerRef} className="relative w-full max-w-md">
+    <div ref={containerRef} className={cn("relative w-full", className)}>
       <div className="relative">
         <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
         <Input