CANON-041: replace 100vh with 100dvh in studio-hub sidebar#38
Open
VaultSparkStudios wants to merge 1 commit into
Open
CANON-041: replace 100vh with 100dvh in studio-hub sidebar#38VaultSparkStudios wants to merge 1 commit into
VaultSparkStudios wants to merge 1 commit into
Conversation
On iOS/Android, 100vh is the larger (static) viewport height and clips the bottom of fixed/sticky containers behind the browser's dynamic chrome (address bar, bottom toolbar). 100dvh tracks the actual visible viewport, so the mobile nav drawer and sticky desktop sidebar are always fully reachable without scrolling past hidden content. Fixes body, #app, .shell (min-height) and .sidebar height in both the sticky desktop position and the fixed mobile-nav-open overlay.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Replace all
100vhusages instudio-hub/src/styles/hub.csswith100dvh.Files changed:
studio-hub/src/styles/hub.css(5 lines, body / #app / .shell / .sidebar desktop / .sidebar mobile drawer)Why (CANON-041)
On iOS and Android,
100vhis the static (large) viewport height — it includes the browser chrome (address bar, bottom toolbar). When the browser chrome is visible,100vhis taller than the actual visible area, clipping the bottom of fixed or sticky containers behind the toolbar.100dvhtracks the dynamic visible viewport and shrinks with the browser chrome, keeping content fully reachable.The mobile sidebar drawer (
position: fixed; height: 100vhinside.shell.mobile-nav-open) is the direct CANON-041 violation: an open mobile nav taller than the screen with content hidden behind the iOS bottom bar. The100dvhfix ensures the drawer always fits within the visible viewport and its internaloverflow-y: autoscroll works correctly.The desktop sticky sidebar and layout containers (
body,#app,.shell) are fixed at the same time — same root cause, same one-line fix.How to verify on mobile
vaultsparkstudios.com/studio-hub/on an iPhone (Safari) or Android (Chrome).Generated by Claude Code