fix(mobile): collapse search bar to icon on mobile
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>
This commit is contained in:
@@ -78,10 +78,10 @@ export function TopBar() {
|
|||||||
{/* Spacer - push search to center */}
|
{/* Spacer - push search to center */}
|
||||||
<div className="flex-1" />
|
<div className="flex-1" />
|
||||||
|
|
||||||
{/* Search trigger */}
|
{/* Search trigger — icon on mobile, full bar on desktop */}
|
||||||
<button
|
<button
|
||||||
onClick={() => setCommandPaletteOpen(true)}
|
onClick={() => setCommandPaletteOpen(true)}
|
||||||
className="relative w-full text-left"
|
className="hidden sm:relative sm:block w-full text-left"
|
||||||
style={{ maxWidth: '480px' }}
|
style={{ maxWidth: '480px' }}
|
||||||
>
|
>
|
||||||
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
|
<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'}
|
{navigator.platform?.toLowerCase().includes('mac') ? '⌘K' : 'Ctrl+K'}
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</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 */}
|
{/* Spacer - push actions to right */}
|
||||||
<div className="flex-1" />
|
<div className="flex-1" />
|
||||||
|
|||||||
Reference in New Issue
Block a user