From 701a3b602089c1928ae512531e105111febf7e38 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@resolutionflow.com>
Date: Sat, 21 Mar 2026 13:51:14 +0000
Subject: [PATCH] fix(mobile): collapse search bar to icon on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On mobile (<640px), the full search bar with placeholder text and ⌘K
badge was taking too much space in the topbar. Now shows just a
magnifying glass icon that opens the same command palette on tap.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/layout/TopBar.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/layout/TopBar.tsx b/frontend/src/components/layout/TopBar.tsx
index 579a3306..bc31852f 100644
--- a/frontend/src/components/layout/TopBar.tsx
+++ b/frontend/src/components/layout/TopBar.tsx
@@ -78,10 +78,10 @@ export function TopBar() {
         {/* Spacer - push search to center */}
         <div className="flex-1" />
 
-        {/* Search trigger */}
+        {/* Search trigger — icon on mobile, full bar on desktop */}
         <button
           onClick={() => setCommandPaletteOpen(true)}
-          className="relative w-full text-left"
+          className="hidden sm:relative sm:block w-full text-left"
           style={{ maxWidth: '480px' }}
         >
           <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
@@ -92,6 +92,13 @@ export function TopBar() {
             {navigator.platform?.toLowerCase().includes('mac') ? '⌘K' : 'Ctrl+K'}
           </span>
         </button>
+        <button
+          onClick={() => setCommandPaletteOpen(true)}
+          className="sm:hidden rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground transition-colors"
+          title="Search"
+        >
+          <Search size={18} />
+        </button>
 
         {/* Spacer - push actions to right */}
         <div className="flex-1" />