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/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