From 3a100f8fde402f45b51a40b89cbf988535491e96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 23 Feb 2026 08:09:51 +0100
Subject: [PATCH] feat: move units search and category select to a row below
 description

- Relocate SearchUnits and Category Select into a dedicated row at the top of MainConverter
- Remove them from the converter card header for a cleaner layout
- Update vertical spacing for better visual hierarchy
---
 components/units/converter/MainConverter.tsx | 55 ++++++++++----------
 1 file changed, 28 insertions(+), 27 deletions(-)

diff --git a/components/units/converter/MainConverter.tsx b/components/units/converter/MainConverter.tsx
index 6dd7984..49f0570 100644
--- a/components/units/converter/MainConverter.tsx
+++ b/components/units/converter/MainConverter.tsx
@@ -111,42 +111,43 @@ export default function MainConverter() {
   }, [selectedUnit]);
 
   return (
-    <div className="w-full space-y-6">
+    <div className="w-full space-y-8">
       {/* Command Palette */}
       <CommandPalette
         onSelectMeasure={setSelectedMeasure}
         onSelectUnit={handleSearchSelect}
       />
 
+      {/* Quick Access Row */}
+      <div className="flex flex-col md:flex-row md:items-center gap-4 justify-between bg-card p-4 rounded-lg border">
+        <div className="flex-1">
+          <SearchUnits onSelectUnit={handleSearchSelect} />
+        </div>
+
+        <div className="w-full md:w-64 shrink-0">
+          <Select
+            value={selectedMeasure}
+            onChange={(e) => setSelectedMeasure(e.target.value as Measure)}
+            className="h-10 text-sm"
+            style={{
+              borderLeft: `4px solid ${getCategoryColorHex(selectedMeasure)}`,
+            }}
+          >
+            {measures.map((measure) => (
+              <option key={measure} value={measure}>
+                {formatMeasureName(measure)}
+              </option>
+            ))}
+          </Select>
+        </div>
+      </div>
+
       {/* Main Converter Card */}
       <Card>
-        <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-10 text-sm"
-                style={{
-                  borderLeft: `4px solid ${getCategoryColorHex(selectedMeasure)}`,
-                }}
-              >
-                {measures.map((measure) => (
-                  <option key={measure} value={measure}>
-                    {formatMeasureName(measure)}
-                  </option>
-                ))}
-              </Select>
-            </div>
-          </div>
+        <CardHeader>
+          <CardTitle>Convert {formatMeasureName(selectedMeasure)}</CardTitle>
         </CardHeader>
-        <CardContent className="space-y-6 pt-6">
+        <CardContent className="space-y-6 pt-0">
           <div className="flex gap-2 items-end">
             <div className="flex-1">
               <label className="text-sm font-medium mb-2 block">Value</label>