Native sidebar slides out over the status bar (missing top safe-area inset) #295

New issue

Closed

opened 2026-06-26 22:24:48 +00:00 by james · 0 comments

james commented

2026-06-26 22:24:48 +00:00

Owner

On the native app (Android; also the iOS notch), the navigation sidebar/drawer slides out over the system status bar — the Carol brand row overlaps the clock/battery/signal area.

Cause

The authenticated layout renders the drawer with drawerStyle.backgroundColor painting from y=0 (under Android's translucent status bar), and the Sidebar root container (apps/client/lib/nav/Sidebar.tsx) used only paddingVertical: 16 — it never consumed useSafeAreaInsets(). So content started 16px from the top of the drawer surface, inside the status-bar region.

The in-scene MobileHeader in apps/client/app/(app)/_layout.tsx already insets correctly (paddingTop: insets.top); the drawer didn't. Fix mirrors that pattern.

Fix

In apps/client/lib/nav/Sidebar.tsx, add useSafeAreaInsets() and set the sidebar container paddingTop = 16 + insets.top. On web insets.top is 0, so the permanent/narrow web sidebar is unchanged.

Top-only (matches the reported bug + the MobileHeader precedent); bottom inset is out of scope.

On the native app (Android; also the iOS notch), the navigation sidebar/drawer slides out **over the system status bar** — the Carol brand row overlaps the clock/battery/signal area. ## Cause The authenticated layout renders the drawer with `drawerStyle.backgroundColor` painting from `y=0` (under Android's translucent status bar), and the `Sidebar` root container (`apps/client/lib/nav/Sidebar.tsx`) used only `paddingVertical: 16` — it never consumed `useSafeAreaInsets()`. So content started 16px from the top of the drawer surface, inside the status-bar region. The in-scene `MobileHeader` in `apps/client/app/(app)/_layout.tsx` already insets correctly (`paddingTop: insets.top`); the drawer didn't. Fix mirrors that pattern. ## Fix In `apps/client/lib/nav/Sidebar.tsx`, add `useSafeAreaInsets()` and set the sidebar container `paddingTop = 16 + insets.top`. On web `insets.top` is 0, so the permanent/narrow web sidebar is unchanged. Top-only (matches the reported bug + the `MobileHeader` precedent); bottom inset is out of scope.

james referenced this issue from a commit

2026-06-26 22:25:21 +00:00

fix(client): inset the native sidebar below the status bar

james referenced this issue from a pull request that will close it,

2026-06-26 22:25:32 +00:00

fix(client): inset the native sidebar below the status bar #296

james closed this issue

2026-06-26 22:29:01 +00:00