From b7c80e9e3a01e4f4e96178b0ab9661e58c8cf710 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 14 Jul 2026 03:10:33 +0000 Subject: [PATCH] CANON-041: add safe-area-inset-bottom and 60dvh to nav bottom sheet The mobile nav bottom sheet (active for ~50% of mobile users via canary) was missing env(safe-area-inset-bottom) in its padding-bottom. On iPhone X and later, the 34px home indicator could overlap the Sign In / Join CTA buttons and theme pills at the sheet's bottom edge. Also adds max-height:60dvh (with 60vh fallback) so the sheet height tracks the dynamic viewport on mobile browsers rather than the layout viewport. The main drawer (nav-toggle.js) already handles safe-area-inset-bottom correctly via calc(2rem + env(safe-area-inset-bottom, 0px)); this aligns the sheet to the same standard. Co-Authored-By: Claude Sonnet 4.6 Claude-Session: https://claude.ai/code/session_01TNvDiURcGMFRqh8z5ZLrFa --- assets/nav-sheet.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/nav-sheet.js b/assets/nav-sheet.js index 536356c19..c3e8fa324 100644 --- a/assets/nav-sheet.js +++ b/assets/nav-sheet.js @@ -114,7 +114,7 @@ st.textContent = '.vs-nav-sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:2147483640;opacity:0;pointer-events:none;transition:opacity 240ms ease}' + '.vs-nav-sheet-backdrop.open{opacity:1;pointer-events:auto}' + - '.vs-nav-sheet{position:fixed;left:0;right:0;bottom:0;max-height:60vh;background:var(--mobile-nav-bg,rgba(5,6,14,0.99));border-top:1px solid var(--mobile-nav-border,rgba(255,255,255,0.06));border-radius:18px 18px 0 0;z-index:2147483641;transform:translateY(100%);transition:transform 280ms cubic-bezier(.4,0,.2,1);overflow:auto;padding:0.6rem 1.1rem 1.4rem;color:var(--text);display:flex;flex-direction:column;box-shadow:0 -18px 60px rgba(0,0,0,0.6)}' + + '.vs-nav-sheet{position:fixed;left:0;right:0;bottom:0;max-height:60vh;max-height:60dvh;background:var(--mobile-nav-bg,rgba(5,6,14,0.99));border-top:1px solid var(--mobile-nav-border,rgba(255,255,255,0.06));border-radius:18px 18px 0 0;z-index:2147483641;transform:translateY(100%);transition:transform 280ms cubic-bezier(.4,0,.2,1);overflow:auto;padding:0.6rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom,0px));color:var(--text);display:flex;flex-direction:column;box-shadow:0 -18px 60px rgba(0,0,0,0.6)}' + '.vs-nav-sheet[hidden]{display:none}' + '.vs-nav-sheet.open{transform:translateY(0)}' + '.vs-nav-sheet-handle{width:42px;height:4px;border-radius:2px;background:rgba(255,255,255,0.18);margin:0 auto 0.6rem}' +