From 9a95e9715016fe54208a1b20aef00b2b8a953433 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 23 Feb 2026 07:51:39 +0100
Subject: [PATCH] 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 | 22 ++++++++++----------
 components/units/converter/SearchUnits.tsx   |  5 +++--
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/components/units/converter/MainConverter.tsx b/components/units/converter/MainConverter.tsx
index af0b62c..9e8f9ff 100644
--- a/components/units/converter/MainConverter.tsx
+++ b/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>
diff --git a/components/units/converter/SearchUnits.tsx b/components/units/converter/SearchUnits.tsx
index c18e649..3813842 100644
--- a/components/units/converter/SearchUnits.tsx
+++ b/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