feat(KB-133): add mobile-responsive header with collapsible controls

- Add mobile-only header with collapsible search and overflow menu interactions

- Implement responsive layout locks in CSS for all screen sizes

- Update Header component with touch-friendly interaction states

- Add comprehensive unit and integration tests for mobile controls

- Document mobile header behavior and responsive design in README

packages/dashboard/README.md

@@ -47,6 +47,14 @@ AI-guided interactive planning for creating well-specified tasks from high-level
 - **GitHub Import**: Import issues directly from GitHub repositories
 - **PR Management**: Create, monitor, and merge pull requests for in-review tasks
 
+### Responsive Header
+The dashboard header adapts to small screens to remain usable without wrapping or dropping controls:
+
+- **Mobile Overflow Menu**: On screens narrower than 768px, lower-priority actions (GitHub Import, Planning, Settings, and optionally Usage) move into an accessible overflow menu triggered by a "More actions" button. The menu closes on outside click, Escape key, or after selecting an action.
+- **Collapsible Board Search**: On mobile board view, the search input collapses to an icon button. Tapping the icon expands a focused search field. If a search query is already active, the search stays expanded until cleared or explicitly closed so active filters remain visible.
+- **Always-Visible Controls**: View toggle (Board/List), Terminal, Pause, and Stop buttons remain inline on mobile for immediate access.
+- **Keyboard Accessible**: All mobile controls expose proper ARIA attributes (aria-expanded, aria-haspopup, aria-label) and support keyboard navigation.
+
 ### Interactive Terminal
 Access a fully functional PTY (pseudo-terminal) shell directly from the dashboard. Click the terminal icon in the header to open the interactive terminal modal.
 

packages/dashboard/app/__tests__/mobile-header-controls.test.ts

@@ -0,0 +1,94 @@
+import { describe, it, expect } from "vitest";
+import { readFileSync } from "fs";
+import { resolve } from "path";
+
+/**
+ * Stylesheet regression test for mobile header controls.
+ *
+ * This test verifies that the CSS file contains the necessary mobile
+ * header selectors and rules for:
+ * - Collapsed search trigger (.mobile-search-trigger)
+ * - Expanded mobile search panel (.mobile-search-expanded)
+ * - Overflow menu trigger (.mobile-overflow-trigger)
+ * - Overflow menu popover (.mobile-overflow-menu, .mobile-overflow-item)
+ *
+ * The mobile styles are located within @media (max-width: 768px) blocks.
+ */
+
+describe("mobile-header-controls.css", () => {
+  const cssPath = resolve(__dirname, "../styles.css");
+  const cssContent = readFileSync(cssPath, "utf-8");
+
+  // Extract all content from @media (max-width: 768px) blocks
+  // This is a simplified approach - we find all mobile media blocks and join them
+  function extractMobileMediaBlocks(content: string): string {
+    const blocks: string[] = [];
+    const regex = /@media\s*\(\s*max-width:\s*768px\s*\)\s*\{/g;
+    let match;
+    
+    while ((match = regex.exec(content)) !== null) {
+      const startIdx = match.index + match[0].length;
+      // Find the matching closing brace by counting braces
+      let braceCount = 1;
+      let endIdx = startIdx;
+      while (braceCount > 0 && endIdx < content.length) {
+        if (content[endIdx] === "{") braceCount++;
+        if (content[endIdx] === "}") braceCount--;
+        endIdx++;
+      }
+      if (braceCount === 0) {
+        blocks.push(content.slice(startIdx, endIdx - 1));
+      }
+    }
+    return blocks.join("\n");
+  }
+
+  const mobileCss = extractMobileMediaBlocks(cssContent);
+
+  it("contains at least one @media (max-width: 768px) block", () => {
+    expect(mobileCss.length).toBeGreaterThan(0);
+  });
+
+  it("has mobile search trigger styles", () => {
+    expect(mobileCss).toContain(".mobile-search-trigger");
+  });
+
+  it("has mobile search expanded panel styles", () => {
+    expect(mobileCss).toContain(".mobile-search-expanded");
+  });
+
+  it("has mobile overflow trigger styles", () => {
+    expect(mobileCss).toContain(".mobile-overflow-trigger");
+  });
+
+  it("has mobile overflow menu styles", () => {
+    expect(mobileCss).toContain(".mobile-overflow-menu");
+    expect(mobileCss).toContain(".mobile-overflow-item");
+  });
+
+  it("has mobile overflow menu item hover states", () => {
+    expect(mobileCss).toMatch(/\.mobile-overflow-item:hover/);
+  });
+
+  it("does not contain obsolete mobile header search wrap rules", () => {
+    // The old @media (max-width: 640px) and @media (max-width: 480px) 
+    // header search rules should be removed
+    const removedPatterns = [
+      /@media\s*\(\s*max-width:\s*640px\s*\)\s*\{[^}]*\.header-search/s,
+      /@media\s*\(\s*max-width:\s*480px\s*\)\s*\{[^}]*\.header-search/s,
+    ];
+    
+    for (const pattern of removedPatterns) {
+      expect(cssContent).not.toMatch(pattern);
+    }
+  });
+
+  it("has position relative on header-actions for absolute positioning", () => {
+    // Find the .header-actions rule and check for position: relative
+    const headerActionsMatch = cssContent.match(/\.header-actions\s*\{([^}]+)\}/);
+    expect(headerActionsMatch).toBeTruthy();
+    if (headerActionsMatch) {
+      expect(headerActionsMatch[1]).toContain("position: relative");
+    }
+  });
+});

packages/dashboard/app/components/Header.tsx

@@ -1,4 +1,5 @@
-import { Settings, Pause, Play, Square, Download, LayoutGrid, List, Terminal, Lightbulb, Search, X, Activity } from "lucide-react";
+import { useState, useEffect, useRef, useCallback } from "react";
+import { Settings, Pause, Play, Square, Download, LayoutGrid, List, Terminal, Lightbulb, Search, X, Activity, MoreHorizontal } from "lucide-react";
 
 interface HeaderProps {
   onOpenSettings?: () => void;
@@ -16,6 +17,23 @@ interface HeaderProps {
   onSearchChange?: (query: string) => void;
 }
 
+function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(max-width: 768px)").matches;
+  });
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(max-width: 768px)");
+    const handleChange = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+
+  return isMobile;
+}
+
 export function Header({
   onOpenSettings,
   onOpenGitHubImport,
@@ -31,6 +49,74 @@ export function Header({
   searchQuery = "",
   onSearchChange,
 }: HeaderProps) {
+  const isMobile = useIsMobile();
+  const [isMobileSearchOpen, setIsMobileSearchOpen] = useState(false);
+  const [isOverflowMenuOpen, setIsOverflowMenuOpen] = useState(false);
+  const overflowButtonRef = useRef<HTMLButtonElement>(null);
+  const overflowMenuRef = useRef<HTMLDivElement>(null);
+  const mobileSearchRef = useRef<HTMLDivElement>(null);
+  const mobileSearchInputRef = useRef<HTMLInputElement>(null);
+
+  // Keep mobile search open if there's an active search query
+  const shouldShowMobileSearch = isMobileSearchOpen || searchQuery.length > 0;
+
+  // Close overflow menu on outside click
+  useEffect(() => {
+    if (!isOverflowMenuOpen) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        overflowMenuRef.current &&
+        !overflowMenuRef.current.contains(e.target as Node) &&
+        overflowButtonRef.current &&
+        !overflowButtonRef.current.contains(e.target as Node)
+      ) {
+        setIsOverflowMenuOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOverflowMenuOpen]);
+
+  // Close menus on Escape key
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setIsOverflowMenuOpen(false);
+        setIsMobileSearchOpen(false);
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  // Focus input when mobile search opens
+  useEffect(() => {
+    if (isMobileSearchOpen && mobileSearchInputRef.current) {
+      setTimeout(() => mobileSearchInputRef.current?.focus(), 0);
+    }
+  }, [isMobileSearchOpen]);
+
+  const handleMobileSearchToggle = useCallback(() => {
+    setIsMobileSearchOpen((prev) => !prev);
+  }, []);
+
+  const handleOverflowToggle = useCallback(() => {
+    setIsOverflowMenuOpen((prev) => !prev);
+  }, []);
+
+  const handleOverflowAction = useCallback((callback?: () => void) => {
+    if (callback) callback();
+    setIsOverflowMenuOpen(false);
+  }, []);
+
+  const handleMobileSearchClose = useCallback(() => {
+    setIsMobileSearchOpen(false);
+    if (onSearchChange) onSearchChange("");
+  }, [onSearchChange]);
+
   return (
     <header className="header">
       <div className="header-left">
@@ -39,7 +125,7 @@ export function Header({
         <span className="logo-sub">tasks</span>
       </div>
       <div className="header-actions">
-        {/* View Toggle */}
+        {/* View Toggle - always inline, even on mobile */}
         {onChangeView && (
           <div className="view-toggle">
             <button
@@ -62,8 +148,9 @@ export function Header({
             </button>
           </div>
         )}
-        {/* Search - only show in board view */}
+
-        {onSearchChange && view === "board" && (
+        {/* Desktop Search - only show in board view */}
+        {onSearchChange && view === "board" && !isMobile && (
           <div className="header-search">
             <Search size={14} className="header-search-icon" />
             <input
@@ -84,25 +171,71 @@ export function Header({
             )}
           </div>
         )}
-        {onOpenUsage && (
+
+        {/* Mobile Search Trigger - only show in board view on mobile */}
+        {onSearchChange && view === "board" && isMobile && (
+          <>
+            {!shouldShowMobileSearch ? (
+              <button
+                className="btn-icon mobile-search-trigger"
+                onClick={handleMobileSearchToggle}
+                title="Open search"
+                aria-label="Open search"
+                aria-expanded={false}
+              >
+                <Search size={16} />
+              </button>
+            ) : (
+              <div
+                ref={mobileSearchRef}
+                className="header-search mobile-search-expanded"
+              >
+                <Search size={14} className="header-search-icon" />
+                <input
+                  ref={mobileSearchInputRef}
+                  type="text"
+                  placeholder="Search tasks..."
+                  value={searchQuery}
+                  onChange={(e) => onSearchChange(e.target.value)}
+                  className="header-search-input"
+                />
+                <button
+                  className="header-search-clear"
+                  onClick={handleMobileSearchClose}
+                  aria-label="Close search"
+                >
+                  <X size={14} />
+                </button>
+              </div>
+            )}
+          </>
+        )}
+
+        {/* Desktop actions */}
+        {!isMobile && onOpenUsage && (
           <button className="btn-icon" onClick={onOpenUsage} title="View usage">
             <Activity size={16} />
           </button>
         )}
-        {/* Import from GitHub */}
+
-        <button className="btn-icon" onClick={onOpenGitHubImport} title="Import from GitHub">
+        {!isMobile && (
-          <Download size={16} />
+          <button className="btn-icon" onClick={onOpenGitHubImport} title="Import from GitHub">
-        </button>
+            <Download size={16} />
-        {/* Plan button - AI-guided task creation */}
+          </button>
-        <button
+        )}
-          className="btn-icon"
+
-          onClick={onOpenPlanning}
+        {!isMobile && (
-          title="Create a task with AI planning"
+          <button
-          data-testid="planning-btn"
+            className="btn-icon"
-        >
+            onClick={onOpenPlanning}
-          <Lightbulb size={16} />
+            title="Create a task with AI planning"
-        </button>
+            data-testid="planning-btn"
-        {/* Terminal button - always available for interactive shell access */}
+          >
+            <Lightbulb size={16} />
+          </button>
+        )}
+
+        {/* Terminal button - always inline */}
         <button
           className="btn-icon btn-icon--terminal"
           onClick={onToggleTerminal}
@@ -111,7 +244,8 @@ export function Header({
         >
           <Terminal size={16} />
         </button>
-        {/* Pause button (soft pause): stops new work, lets agents finish */}
+
+        {/* Pause button (soft pause) - always inline */}
         <button
           className={`btn-icon${enginePaused ? " btn-icon--paused" : ""}`}
           onClick={onToggleEnginePause}
@@ -120,7 +254,8 @@ export function Header({
         >
           {enginePaused ? <Play size={16} /> : <Pause size={16} />}
         </button>
-        {/* Stop button (hard stop): kills all agents immediately */}
+
+        {/* Stop button (hard stop) - always inline */}
         <button
           className={`btn-icon${globalPaused ? " btn-icon--stopped" : ""}`}
           onClick={onToggleGlobalPause}
@@ -128,9 +263,74 @@ export function Header({
         >
           {globalPaused ? <Play size={16} /> : <Square size={16} />}
         </button>
-        <button className="btn-icon" onClick={onOpenSettings} title="Settings">
+
-          <Settings size={16} />
+        {/* Mobile overflow menu trigger */}
-        </button>
+        {isMobile && (
+          <button
+            ref={overflowButtonRef}
+            className="btn-icon mobile-overflow-trigger"
+            onClick={handleOverflowToggle}
+            title="More header actions"
+            aria-label="More header actions"
+            aria-expanded={isOverflowMenuOpen}
+            aria-haspopup="menu"
+          >
+            <MoreHorizontal size={16} />
+          </button>
+        )}
+
+        {/* Settings - always inline on desktop */}
+        {!isMobile && (
+          <button className="btn-icon" onClick={onOpenSettings} title="Settings">
+            <Settings size={16} />
+          </button>
+        )}
+
+        {/* Mobile overflow menu */}
+        {isMobile && isOverflowMenuOpen && (
+          <div
+            ref={overflowMenuRef}
+            className="mobile-overflow-menu"
+            role="menu"
+            aria-label="Additional header actions"
+          >
+            {onOpenUsage && (
+              <button
+                className="mobile-overflow-item"
+                onClick={() => handleOverflowAction(onOpenUsage)}
+                role="menuitem"
+              >
+                <Activity size={16} />
+                <span>View usage</span>
+              </button>
+            )}
+            <button
+              className="mobile-overflow-item"
+              onClick={() => handleOverflowAction(onOpenGitHubImport)}
+              role="menuitem"
+            >
+              <Download size={16} />
+              <span>Import from GitHub</span>
+            </button>
+            <button
+              className="mobile-overflow-item"
+              onClick={() => handleOverflowAction(onOpenPlanning)}
+              role="menuitem"
+              data-testid="overflow-planning-btn"
+            >
+              <Lightbulb size={16} />
+              <span>Create a task with AI planning</span>
+            </button>
+            <button
+              className="mobile-overflow-item"
+              onClick={() => handleOverflowAction(onOpenSettings)}
+              role="menuitem"
+            >
+              <Settings size={16} />
+              <span>Settings</span>
+            </button>
+          </div>
+        )}
       </div>
     </header>
   );

packages/dashboard/app/components/__tests__/Header.test.tsx

@@ -1,8 +1,30 @@
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { render, screen, fireEvent } from "@testing-library/react";
 import { Header } from "../Header";
 
+// Mock matchMedia for mobile/desktop viewport tests
+const mockMatchMedia = (matches: boolean) => {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: vi.fn().mockImplementation((query: string) => ({
+      matches,
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+};
+
 describe("Header", () => {
+  beforeEach(() => {
+    // Default to desktop viewport
+    mockMatchMedia(false);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
   it("renders a logo image with correct src and alt", () => {
     render(<Header />);
     const logo = screen.getByAltText("Fusion logo");
@@ -210,4 +232,230 @@ describe("Header", () => {
     const btn = screen.getByTitle("Open Terminal");
     expect((btn as HTMLButtonElement).disabled).toBe(false);
   });
+
+  // ── Mobile Viewport Behavior ─────────────────────────────────────
+
+  describe("mobile viewport", () => {
+    beforeEach(() => {
+      mockMatchMedia(true); // Mobile viewport
+    });
+
+    it("renders mobile search trigger instead of inline search on mobile", () => {
+      const onSearchChange = vi.fn();
+      render(
+        <Header
+          view="board"
+          onChangeView={vi.fn()}
+          searchQuery=""
+          onSearchChange={onSearchChange}
+        />
+      );
+      // Should show the trigger button, not the inline search
+      expect(screen.getByTitle("Open search")).toBeDefined();
+      // The expanded search should not be visible initially
+      expect(screen.queryByPlaceholderText("Search tasks...")).toBeNull();
+    });
+
+    it("mobile search trigger has stable accessible name", () => {
+      const onSearchChange = vi.fn();
+      render(
+        <Header
+          view="board"
+          onChangeView={vi.fn()}
+          searchQuery=""
+          onSearchChange={onSearchChange}
+        />
+      );
+      const trigger = screen.getByLabelText("Open search");
+      expect(trigger).toBeDefined();
+    });
+
+    it("mobile search trigger exposes aria-expanded state", () => {
+      const onSearchChange = vi.fn();
+      render(
+        <Header
+          view="board"
+          onChangeView={vi.fn()}
+          searchQuery=""
+          onSearchChange={onSearchChange}
+        />
+      );
+      const trigger = screen.getByLabelText("Open search");
+      expect(trigger.getAttribute("aria-expanded")).toBe("false");
+    });
+
+    it("expands mobile search when trigger is clicked", () => {
+      const onSearchChange = vi.fn();
+      render(
+        <Header
+          view="board"
+          onChangeView={vi.fn()}
+          searchQuery=""
+          onSearchChange={onSearchChange}
+        />
+      );
+      const trigger = screen.getByTitle("Open search");
+      fireEvent.click(trigger);
+      // Search input should now be visible
+      expect(screen.getByPlaceholderText("Search tasks...")).toBeDefined();
+    });
+
+    it("mobile search stays expanded when searchQuery is non-empty", () => {
+      const onSearchChange = vi.fn();
+      render(
+        <Header
+          view="board"
+          onChangeView={vi.fn()}
+          searchQuery="active query"
+          onSearchChange={onSearchChange}
+        />
+      );
+      // Even without clicking, search should be visible due to active query
+      expect(screen.getByPlaceholderText("Search tasks...")).toBeDefined();
+      expect(screen.getByDisplayValue("active query")).toBeDefined();
+    });
+
+    it("closes mobile search and clears query when close button clicked", () => {
+      const onSearchChange = vi.fn();
+      render(
+        <Header
+          view="board"
+          onChangeView={vi.fn()}
+          searchQuery="test query"
+          onSearchChange={onSearchChange}
+        />
+      );
+      // Close the search
+      const closeBtn = screen.getByLabelText("Close search");
+      fireEvent.click(closeBtn);
+      expect(onSearchChange).toHaveBeenCalledWith("");
+    });
+
+    it("renders mobile overflow menu trigger on mobile", () => {
+      render(<Header onOpenSettings={vi.fn()} />);
+      const overflowBtn = screen.getByTitle("More header actions");
+      expect(overflowBtn).toBeDefined();
+    });
+
+    it("overflow trigger has correct ARIA attributes", () => {
+      render(<Header onOpenSettings={vi.fn()} />);
+      const overflowBtn = screen.getByLabelText("More header actions");
+      expect(overflowBtn.getAttribute("aria-haspopup")).toBe("menu");
+      expect(overflowBtn.getAttribute("aria-expanded")).toBe("false");
+    });
+
+    it("opens overflow menu when trigger is clicked", () => {
+      render(<Header onOpenSettings={vi.fn()} onOpenPlanning={vi.fn()} />);
+      const overflowBtn = screen.getByTitle("More header actions");
+      fireEvent.click(overflowBtn);
+      // Menu items should be visible
+      expect(screen.getByRole("menu")).toBeDefined();
+      expect(screen.getByText("Settings")).toBeDefined();
+      expect(screen.getByText("Create a task with AI planning")).toBeDefined();
+    });
+
+    it("overflow menu items dispatch correct callbacks", () => {
+      const onOpenSettings = vi.fn();
+      const onOpenPlanning = vi.fn();
+      const onOpenGitHubImport = vi.fn();
+      render(
+        <Header
+          onOpenSettings={onOpenSettings}
+          onOpenPlanning={onOpenPlanning}
+          onOpenGitHubImport={onOpenGitHubImport}
+        />
+      );
+      fireEvent.click(screen.getByTitle("More header actions"));
+      fireEvent.click(screen.getByText("Settings"));
+      expect(onOpenSettings).toHaveBeenCalled();
+
+      // Re-open menu and test planning button
+      fireEvent.click(screen.getByTitle("More header actions"));
+      fireEvent.click(screen.getByText("Create a task with AI planning"));
+      expect(onOpenPlanning).toHaveBeenCalled();
+    });
+
+    it("closes overflow menu after selecting an action", () => {
+      const onOpenSettings = vi.fn();
+      render(<Header onOpenSettings={onOpenSettings} />);
+      fireEvent.click(screen.getByTitle("More header actions"));
+      fireEvent.click(screen.getByText("Settings"));
+      // Menu should be closed
+      expect(screen.queryByRole("menu")).toBeNull();
+    });
+
+    it("closes overflow menu on outside click", () => {
+      render(<Header onOpenSettings={vi.fn()} />);
+      fireEvent.click(screen.getByTitle("More header actions"));
+      expect(screen.getByRole("menu")).toBeDefined();
+      // Click outside (on header)
+      fireEvent.mouseDown(document.body);
+      // Menu should be closed
+      expect(screen.queryByRole("menu")).toBeNull();
+    });
+
+    it("closes overflow menu on Escape key", () => {
+      render(<Header onOpenSettings={vi.fn()} />);
+      fireEvent.click(screen.getByTitle("More header actions"));
+      expect(screen.getByRole("menu")).toBeDefined();
+      fireEvent.keyDown(document, { key: "Escape" });
+      expect(screen.queryByRole("menu")).toBeNull();
+    });
+
+    it("hides desktop-only actions on mobile", () => {
+      render(
+        <Header
+          onOpenSettings={vi.fn()}
+          onOpenGitHubImport={vi.fn()}
+          onOpenPlanning={vi.fn()}
+        />
+      );
+      // These buttons should not be directly visible (they're in overflow menu)
+      expect(screen.queryByTitle("Import from GitHub")).toBeNull();
+      expect(screen.queryByTitle("Create a task with AI planning")).toBeNull();
+      expect(screen.queryByTitle("Settings")).toBeNull();
+    });
+
+    it("shows view toggle inline on mobile", () => {
+      render(<Header view="board" onChangeView={vi.fn()} />);
+      // View toggle should still be visible inline
+      expect(screen.getByTitle("Board view")).toBeDefined();
+      expect(screen.getByTitle("List view")).toBeDefined();
+    });
+
+    it("shows terminal and pause controls inline on mobile", () => {
+      render(
+        <Header
+          onToggleTerminal={vi.fn()}
+          onToggleEnginePause={vi.fn()}
+          onToggleGlobalPause={vi.fn()}
+        />
+      );
+      expect(screen.getByTitle("Open Terminal")).toBeDefined();
+      expect(screen.getByTitle("Pause scheduling")).toBeDefined();
+      expect(screen.getByTitle("Stop AI engine")).toBeDefined();
+    });
+
+    it("overflow menu includes usage button when onOpenUsage provided", () => {
+      render(<Header onOpenSettings={vi.fn()} onOpenUsage={vi.fn()} />);
+      fireEvent.click(screen.getByTitle("More header actions"));
+      expect(screen.getByText("View usage")).toBeDefined();
+    });
+
+    it("mobile search input dispatches onSearchChange when typing", () => {
+      const onSearchChange = vi.fn();
+      render(
+        <Header
+          view="board"
+          onChangeView={vi.fn()}
+          searchQuery=""
+          onSearchChange={onSearchChange}
+        />
+      );
+      fireEvent.click(screen.getByTitle("Open search"));
+      const input = screen.getByPlaceholderText("Search tasks...");
+      fireEvent.change(input, { target: { value: "test" } });
+      expect(onSearchChange).toHaveBeenCalledWith("test");
+    });
+  });
 });

packages/dashboard/app/styles.css

@@ -113,6 +113,7 @@ body {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
+  position: relative;
 }
 
 .btn-icon {
@@ -273,32 +274,6 @@ body {
   background: var(--border);
 }
 
-/* Mobile responsive: hide search on very small screens */
-@media (max-width: 640px) {
-  .header-search {
-    max-width: 160px;
-    min-width: 120px;
-    padding: 6px 8px;
-  }
-  
-  .header-search-input {
-    font-size: 12px;
-  }
-}
-
-@media (max-width: 480px) {
-  .header-search {
-    order: 1;
-    width: 100%;
-    max-width: none;
-    margin-top: 8px;
-  }
-  
-  .header-actions {
-    flex-wrap: wrap;
-  }
-}
-
 .logo {
   font-size: 20px;
   font-weight: 700;
@@ -2479,6 +2454,73 @@ body {
     padding: 12px 12px;
   }
 
+  /* Mobile header: collapsible search and overflow menu */
+  .mobile-search-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mobile-search-expanded {
+    position: absolute;
+    right: 140px;
+    left: auto;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 200px;
+    max-width: 200px;
+    min-width: 160px;
+    z-index: 10;
+    background: var(--surface);
+    box-shadow: var(--shadow-md);
+  }
+
+  .mobile-overflow-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mobile-overflow-menu {
+    position: absolute;
+    top: calc(100% + 4px);
+    right: 12px;
+    min-width: 220px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-lg);
+    z-index: 100;
+    padding: 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .mobile-overflow-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 12px;
+    background: none;
+    border: none;
+    border-radius: var(--radius-sm);
+    color: var(--text);
+    font-size: 13px;
+    cursor: pointer;
+    text-align: left;
+    transition: background var(--transition-fast);
+  }
+
+  .mobile-overflow-item:hover {
+    background: var(--card);
+  }
+
+  .mobile-overflow-item svg {
+    color: var(--text-muted);
+    flex-shrink: 0;
+  }
+
   /* Modal: full-screen on mobile */
   .modal-overlay {
     padding-top: 0;