CANON-041: replace 100vh with 100dvh in Studio Hub sidebar#57
CANON-041: replace 100vh with 100dvh in Studio Hub sidebar#57VaultSparkStudios wants to merge 1 commit into
Conversation
On iOS Safari with dynamic address bar, 100vh includes the browser chrome so the fixed mobile sidebar overflows below the visible viewport — bottom nav links clip and are unreachable. 100dvh tracks the dynamic visible viewport correctly. Also adds padding-bottom safe-area inset for notched devices and the 100vh fallback for older browsers that lack dvh support. Co-Authored-By: Claude <noreply@anthropic.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0158ce955f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| radial-gradient(circle at 50% 100%, rgba(255, 200, 116, 0.07), transparent 26%), | ||
| linear-gradient(145deg, #04070d 0%, #07111d 45%, #03060a 100%); | ||
| min-height: 100vh; | ||
| min-height: 100dvh; |
There was a problem hiding this comment.
In browsers that do not support dynamic viewport units, this 100dvh declaration is ignored; the same commit keeps a 100vh fallback for the mobile sidebar, but the body, #app, .shell, and desktop .sidebar replacements no longer have one. On older Safari/embedded webviews the hub can therefore lose its full-viewport shell and scrollable/sticky sidebar behavior that previously worked with 100vh. Keep the old 100vh declaration immediately before the 100dvh override for these non-mobile rules as well.
Useful? React with 👍 / 👎.
2 participants
What
Replaces all
100vhwith100dvhinstudio-hub/src/styles/hub.css— the CANON-041 violation that was present across the body, layout shell, desktop sticky sidebar, and the mobile fixed sidebar.Root issue (mobile sidebar, line 950): On iOS Safari with a dynamic address bar,
100vhequals the full viewport including browser chrome. When the address bar is visible, the fixed-position mobile sidebar extends below the visible screen — bottom nav links clip and are unreachable even thoughoverflow-y: autois set.100dvhalways tracks the dynamic visible viewport.Extra fix included for the mobile sidebar block:
height: 100vh→height: 100vh; height: 100dvh;(100vh kept as fallback for browsers without dvh support)padding-bottom: env(safe-area-inset-bottom, 0)so notched/home-bar devices don't clip the last nav itemFiles changed
studio-hub/src/styles/hub.css— 5100vh→100dvhacross body, #app, .shell, .sidebar (desktop sticky), .sidebar (mobile fixed)How to verify on mobile
/studio-hub/on an iPhone with iOS Safari (any recent version)Previously: bottom sidebar items clipped below screen;
100vhexceeded the visual viewport when iOS address bar was shown.After: sidebar fills exactly the dynamic visible viewport; all items reachable.
Generated by Claude Code