From 52446a994a77bd49639881bc010ea05ff63918bc Mon Sep 17 00:00:00 2001
From: Alexander Schmidt <alexander@schmidt.eco>
Date: Sat, 31 Jan 2026 15:49:36 +0100
Subject: [PATCH] improve display of searchbox

---
 js/components/search-box.js | 40 +++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/js/components/search-box.js b/js/components/search-box.js
index a2043a2..3dc2f6b 100644
--- a/js/components/search-box.js
+++ b/js/components/search-box.js
@@ -624,6 +624,15 @@ style.textContent = /* css */`
         outline-offset: -2px;
     }
     
+    /* Mobile: Search query field top corners */
+    search-box .search-field-query input {
+        border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
+    }
+    
+    search-box .search-field-query input:focus {
+        border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
+    }
+    
     search-box .search-field input::placeholder {
         color: var(--color-text-muted);
     }
@@ -631,6 +640,7 @@ style.textContent = /* css */`
     search-box .search-row-submit {
         padding: var(--space-sm);
         background: var(--color-bg-secondary);
+        border-radius: 0 0 calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px);
     }
     
     search-box .btn-search {
@@ -725,6 +735,11 @@ style.textContent = /* css */`
             border-radius: var(--radius-md);
         }
         
+        /* Desktop: Submit row - top-right corner inherits from parent */
+        search-box .search-box .search-row-submit {
+            border-radius: 0 calc(var(--radius-xl) - 2px) 0 0;
+        }
+        
         search-box .search-box .btn-search-text {
             display: none;
         }
@@ -733,6 +748,31 @@ style.textContent = /* css */`
         search-box .search-box .category-dropdown-label {
             max-width: 250px;
         }
+        
+        /* Desktop: Search query field - only top-left rounded */
+        search-box .search-field-query input {
+            border-radius: calc(var(--radius-xl) - 2px) 0 0 0;
+        }
+        
+        /* Desktop: Category dropdown trigger - bottom-left rounded on hover/focus */
+        search-box .category-dropdown-trigger:hover,
+        search-box .category-dropdown-trigger:focus {
+            border-radius: 0 0 0 calc(var(--radius-xl) - 2px);
+        }
+        
+        /* Desktop: Last filter (location/radius) - bottom-right rounded */
+        search-box .filter-location:last-child select,
+        search-box .filter-radius:not(.hidden):last-child select {
+            border-radius: 0 0 calc(var(--radius-xl) - 2px) 0;
+        }
+        
+        search-box .filter-location:last-child select:hover,
+        search-box .filter-location:last-child select:focus,
+        search-box .filter-radius:not(.hidden):last-child select:hover,
+        search-box .filter-radius:not(.hidden):last-child select:focus {
+            background: var(--color-bg-secondary);
+            border-radius: 0 0 calc(var(--radius-xl) - 2px) 0;
+        }
     }
     
     /* Category Dropdown (Desktop) */