Skip to content

[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
tswicegood:contrib/tswicegood/dashboard-mobile-sidebar
Open

[dashboards] open-brain-dashboard-next: fix Sign Out button hidden behind iOS Safari URL bar#249
tswicegood wants to merge 1 commit intoNateBJones-Projects:mainfrom
tswicegood:contrib/tswicegood/dashboard-mobile-sidebar

Conversation

@tswicegood
Copy link
Copy Markdown

Contribution Type

  • Dashboard (/dashboards)

What does this do?

One-character CSS fix in components/Sidebar.tsx: h-screenh-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 the h-dvh utility natively — no config changes needed, no other code touched.

Repro / verification

  • Before: open the dashboard on an iPhone in Safari with the URL bar visible — open the sidebar — the bottom (RestrictedToggle + Sign Out) is below the fold.
  • After: same conditions — bottom of sidebar sits flush with the visible viewport — Sign Out reachable on first tap.

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-dvh falls back gracefully where supported, and Mobile Safari has supported dvh since iOS 15.4).

Checklist

  • I've read CONTRIBUTING.md
  • No credentials, API keys, or secrets are included
  • I tested this on my own Open Brain instance (live deploy, real iPhone, real URL bar)

…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>
@github-actions github-actions Bot added the dashboard Contribution: frontend template label Apr 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

dashboard Contribution: frontend template

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant