[dashboards] open-brain-dashboard-next: fix Sign Out button hidden behind iOS Safari URL bar#249
Open
tswicegood wants to merge 1 commit intoNateBJones-Projects:mainfrom
Conversation
…on mobile Safari The sidebar uses h-screen (height: 100vh), which on iOS Safari is the *largest* viewport — i.e. the height when the URL bar is collapsed. While the URL bar is visible, the actual visible area is shorter, so the bottom of the sidebar — including the Sign Out button — is rendered below the fold and effectively unreachable until you can scroll-trigger the URL bar to collapse. Switching to h-dvh (100dvh, dynamic viewport height) makes the sidebar bound itself to the *currently* visible viewport, so the Sign Out button stays visible regardless of browser chrome state. Tailwind v4 supports the h-dvh utility natively; no config changes needed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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
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.
Contribution Type
/dashboards)What does this do?
One-character CSS fix in
components/Sidebar.tsx:h-screen→h-dvh.The sidebar uses
h-screen(height: 100vh), which on iOS Safari is the largest viewport — the height when the URL bar is collapsed. While the URL bar is visible, the actual visible area is shorter, so the bottom of the sidebar — including the Sign Out button — renders below the fold and is effectively unreachable until you scroll-trigger the URL bar to collapse. On a fresh page load you can't sign out.h-dvh(height: 100dvh, dynamic viewport height) makes the sidebar bound itself to the currently visible viewport, so the Sign Out button stays in view regardless of browser chrome state. Tailwind v4 supports theh-dvhutility natively — no config changes needed, no other code touched.Repro / verification
I tested this on my own deploy (Cloudflare Worker via OpenNext, current iOS Safari) before opening this PR.
Requirements
None — pure CSS class change. No new deps, no behavior change on desktop or other mobile browsers (
h-dvhfalls back gracefully where supported, and Mobile Safari has supporteddvhsince iOS 15.4).Checklist