From c9fc21e8dbfd3b34307b47b014226bfc0c6aa638 Mon Sep 17 00:00:00 2001
From: Jake Jarvis <jake@jarv.is>
Date: Tue, 3 Mar 2026 16:26:36 -0500
Subject: [PATCH] Add search trigger to mobile header, hide settings/sign-out
 on mobile

The search modal was inaccessible on mobile since the trigger was
desktop-only. Replace the settings and sign-out buttons (already
available in the mobile tab bar) with a full-width search bar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../_components/continue-watching-card.tsx    |  2 +-
 components/nav-bar.tsx                        | 23 +++++++++++++------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/app/(pages)/dashboard/_components/continue-watching-card.tsx b/app/(pages)/dashboard/_components/continue-watching-card.tsx
index 3339575..904e3e4 100644
--- a/app/(pages)/dashboard/_components/continue-watching-card.tsx
+++ b/app/(pages)/dashboard/_components/continue-watching-card.tsx
@@ -59,7 +59,7 @@ export function ContinueWatchingCard({
               Up next
             </p>
             <p className="mt-0.5 truncate text-sm font-medium text-white">
-              <span className="font-mono text-xs text-white/60">
+              <span className="font-mono text-xs text-white/60 [word-spacing:-0.25em] mr-0.5">
                 S{item.nextEpisode.seasonNumber} E
                 {item.nextEpisode.episodeNumber}
               </span>{" "}
diff --git a/components/nav-bar.tsx b/components/nav-bar.tsx
index f91b280..89dffa4 100644
--- a/components/nav-bar.tsx
+++ b/components/nav-bar.tsx
@@ -23,11 +23,11 @@ export function NavBar() {
 
   return (
     <header className="sticky top-0 z-50 border-b border-border/50 bg-background/80 backdrop-blur-xl">
-      <nav className="mx-auto flex h-14 max-w-6xl items-center justify-between px-4 sm:px-6">
-        <div className="flex items-center gap-6">
+      <nav className="mx-auto flex h-14 max-w-6xl items-center justify-between gap-5 px-4 sm:gap-0 sm:px-6">
+        <div className="flex items-center gap-3 sm:gap-6">
           <Link
             href="/dashboard"
-            className="text-foreground transition-colors hover:text-primary"
+            className="shrink-0 text-foreground transition-colors hover:text-primary"
           >
             <SofaLogo size={28} />
           </Link>
@@ -61,8 +61,17 @@ export function NavBar() {
           </div>
         </div>
 
-        <div className="flex items-center gap-3">
-          {/* Search trigger pill */}
+        <div className="flex flex-1 items-center justify-end gap-3 sm:flex-none">
+          {/* Mobile search trigger */}
+          <button
+            type="button"
+            onClick={() => setCommandPaletteOpen(true)}
+            className="flex flex-1 items-center gap-2 rounded-lg border border-border/50 bg-card/50 px-3 py-1.5 text-sm text-muted-foreground transition-all hover:border-primary/20 hover:bg-card sm:hidden"
+          >
+            <IconSearch size={14} />
+            <span>Search...</span>
+          </button>
+          {/* Desktop search trigger pill */}
           <button
             type="button"
             onClick={() => setCommandPaletteOpen(true)}
@@ -72,8 +81,8 @@ export function NavBar() {
             <span>Search...</span>
             <Kbd className="ml-1">⌘K</Kbd>
           </button>
-          <div className="flex items-center gap-2 rounded-lg border border-border/30 px-2.5 py-1">
-            <span className="hidden text-sm text-muted-foreground sm:inline">
+          <div className="hidden items-center gap-2 rounded-lg border border-border/30 px-2.5 py-1 sm:flex">
+            <span className="text-sm text-muted-foreground">
               {session?.user?.name}
             </span>
             <Link