mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-14 22:50:51 +00:00
fix(nav): let the More sheet scroll on a phone held sideways
Held sideways a phone keeps the bottom bar, and the sheet's 90 dvh cap is about 350 px there, while the hub needs 410 to 540 px. The grid did not shrink or scroll, so the last rows (documents, timeline, coach, achievements) sat below the screen edge. It scrolls inside the sheet now and stops at its end instead of pulling the page.
This commit is contained in:
1 parent
177e85f9c3
commit
e99180fc7d
2 files changed
+12
-2
No files matched your search
@@ -129,6 +129,16 @@ describe("the shell owns the safe area", () => {
|
||||
expect(bottomClass).not.toMatch(/(?<![\w-])bottom-/);
|
||||
});
|
||||
|
||||
it("the More sheet's grid scrolls inside the sheet's height cap", () => {
|
||||
// Held sideways a phone keeps the bottom bar, and 90 dvh of a 393 px
|
||||
// screen is shorter than the hub: the last rows sat below the edge.
|
||||
const nav = code(read("src/components/layout/bottom-nav.tsx"));
|
||||
const grid = nav.match(/"grid [^"]*grid-cols-2[^"]*"/)?.[0] ?? "";
|
||||
expect(grid).toMatch(/\bmin-h-0\b/);
|
||||
expect(grid).toMatch(/\boverflow-y-auto\b/);
|
||||
expect(grid).toMatch(/\boverscroll-contain\b/);
|
||||
});
|
||||
|
||||
it("the sheet primitives name their side for those rules", () => {
|
||||
expect(read("src/components/ui/sheet.tsx")).toMatch(
|
||||
/data-sheet-side=\{side\}/,
|
||||
|
||||
Reference in new issue
Block a user