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>
-          <div className="flex items-center justify-between">
-            <CardTitle>Convert {formatMeasureName(selectedMeasure)}</CardTitle>
-            <div className="w-48">
+        <CardHeader className="pb-4 border-b">
+          <div className="flex flex-col md:flex-row md:items-center gap-4 justify-between">
+            <CardTitle className="shrink-0">Convert {formatMeasureName(selectedMeasure)}</CardTitle>
+            
+            <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">
-          {/* Quick Search */}
-          <div className="flex justify-center pb-2 border-b">
-            <SearchUnits onSelectUnit={handleSearchSelect} />
-          </div>
-
+        <CardContent className="space-y-6 pt-6">
           <div className="flex gap-2 items-end">
             <div className="flex-1">
               <label className="text-sm font-medium mb-2 block">Value</label>