root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -126,4 +126,23 @@ describe("mobile-header-controls.css", () => {
// The selector should have width: 100% rule
expect(mobileCss).toMatch(/\.mobile-search-expanded\s*\{[^}]*width:\s*100%/);
});
it("does not contain fixed-offset patterns that can push mobile search off-screen", () => {
// Extract all mobile .mobile-search-expanded rules and check they don't have
// position: absolute with negative left/right offsets
const expandedBlocks = mobileCss.match(/\.mobile-search-expanded\s*\{[^}]*\}/g) || [];
for (const block of expandedBlocks) {
// Fail if any fixed negative offset is found (these push the element off-screen)
expect(block).not.toMatch(/left:\s*-\d/);
expect(block).not.toMatch(/right:\s*-\d/);
}
});
it("has mobile header-floating-search with safe-area-inset padding", () => {
// The header-floating-search in mobile must respect safe-area-inset
// to prevent clipping on notched devices
expect(mobileCss).toContain(".header-floating-search");
// Should have safe-area-inset handling for left/right
expect(mobileCss).toMatch(/\.header-floating-search\s*\{[^}]*env\(safe-area-inset/);
});
});