fix(FN-1458): add safe-area-inset padding to mobile header floating search

- Add safe-area-inset padding to mobile header-floating-search to prevent viewport overlap
- Add regression tests in Header.test.tsx for mobile search safe-area handling
- Add regression tests in mobile-header-controls.test.tsx for viewport safety
- Document the fix in .fusion/memory.md
This commit is contained in:
gsxdsm
2026-04-10 09:39:59 -07:00
parent 0ab37d87a6
commit 673deced23
5 changed files with 107 additions and 0 deletions

View File

@@ -902,6 +902,31 @@ describe("Header", () => {
});
});
describe("mobile search with mobileNavEnabled", () => {
it("renders mobile search input when searchQuery is active with mobileNavEnabled", () => {
renderHeader({ view: "board", searchQuery: "test query", onSearchChange: vi.fn(), onChangeView: noop }, "mobile");
// Search should be visible even with mobileNavEnabled when query is active
expect(screen.getByPlaceholderText("Search tasks...")).toBeDefined();
expect(screen.getByDisplayValue("test query")).toBeDefined();
});
it("can open mobile search when mobileNavEnabled is true", () => {
renderHeader({ view: "board", searchQuery: "", onSearchChange: vi.fn(), onChangeView: noop }, "mobile");
// Should show the trigger button
expect(screen.getByTestId("mobile-header-search-btn")).toBeDefined();
// Expanded search should not be visible initially
expect(screen.queryByPlaceholderText("Search tasks...")).toBeNull();
});
it("closes mobile search and clears query when close button clicked with mobileNavEnabled", () => {
const onSearchChange = vi.fn();
renderHeader({ view: "board", searchQuery: "test query", onSearchChange, onChangeView: noop }, "mobile");
const closeBtn = screen.getByLabelText("Close search");
fireEvent.click(closeBtn);
expect(onSearchChange).toHaveBeenCalledWith("");
});
});
describe("Projects button", () => {
const singleProject = [
{ id: "1", name: "Test Project", path: "/path/to/project", status: "active" as const },

View File

@@ -946,6 +946,57 @@ describe("Header", () => {
fireEvent.click(screen.getByTestId("overflow-scripts-manage"));
expect(onOpenScripts).toHaveBeenCalledOnce();
});
// ── Mobile Search with mobileNavEnabled ───────────────────────
it("renders mobile search input when searchQuery is active with mobileNavEnabled", () => {
const onSearchChange = vi.fn();
render(
<Header
view="board"
onChangeView={vi.fn()}
searchQuery="test query"
onSearchChange={onSearchChange}
mobileNavEnabled={true}
/>
);
// Search should be visible even with mobileNavEnabled when query is active
expect(screen.getByPlaceholderText("Search tasks...")).toBeDefined();
expect(screen.getByDisplayValue("test query")).toBeDefined();
});
it("can open mobile search when mobileNavEnabled is true", () => {
const onSearchChange = vi.fn();
render(
<Header
view="board"
onChangeView={vi.fn()}
searchQuery=""
onSearchChange={onSearchChange}
mobileNavEnabled={true}
/>
);
// Should show the trigger button
expect(screen.getByTestId("mobile-header-search-btn")).toBeDefined();
// Expanded search should not be visible initially
expect(screen.queryByPlaceholderText("Search tasks...")).toBeNull();
});
it("closes mobile search and clears query when close button clicked with mobileNavEnabled", () => {
const onSearchChange = vi.fn();
render(
<Header
view="board"
onChangeView={vi.fn()}
searchQuery="test query"
onSearchChange={onSearchChange}
mobileNavEnabled={true}
/>
);
const closeBtn = screen.getByLabelText("Close search");
fireEvent.click(closeBtn);
expect(onSearchChange).toHaveBeenCalledWith("");
});
});
// ── Multi-Project Selector ────────────────────────────────────