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

Merged

james merged 1 commit from 295-sidebar-safe-area into main 2026-06-26 22:29:00 +00:00

Conversation 1 Commits 1 Files changed 1 +16 -1

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

Owner

Copy link

The native navigation sidebar slid out over the system status bar — the Carol brand row overlapped the clock/battery/signal area.

Cause

The drawer surface paints from y=0 (under Android's translucent status bar / behind the iOS notch), but the Sidebar root container (apps/client/lib/nav/Sidebar.tsx) used only paddingVertical: 16 and never consumed useSafeAreaInsets(). The in-scene MobileHeader in app/(app)/_layout.tsx already insets correctly; the drawer didn't.

Fix

Add useSafeAreaInsets() and set the sidebar container paddingTop = 16 + insets.top, mirroring the header's pattern. react-native-safe-area-context is already a dep and SafeAreaProvider is already mounted at the root.

Correct on all targets

• Android / iOS: insets.top (status-bar height / notch) pushes content clear; the inset strip still fills with the themed surface, so no content sits under the clock.
• Web: insets.top is 0 → paddingTop collapses to the existing 16; the permanent (≥720px) and narrow-web slide-in sidebars are unchanged.

Top-only, matching the reported bug and the MobileHeader precedent (bottom inset out of scope).

Verification

• pnpm -F @carol/client typecheck — passes.
• Manual: open the drawer on Android — brand row now sits below the status bar.

Closes #295

🤖 Generated with Claude Code

The native navigation sidebar slid out **over the system status bar** — the Carol brand row overlapped the clock/battery/signal area. ## Cause The drawer surface paints from `y=0` (under Android's translucent status bar / behind the iOS notch), but the `Sidebar` root container (`apps/client/lib/nav/Sidebar.tsx`) used only `paddingVertical: 16` and never consumed `useSafeAreaInsets()`. The in-scene `MobileHeader` in `app/(app)/_layout.tsx` already insets correctly; the drawer didn't. ## Fix Add `useSafeAreaInsets()` and set the sidebar container `paddingTop = 16 + insets.top`, mirroring the header's pattern. `react-native-safe-area-context` is already a dep and `SafeAreaProvider` is already mounted at the root. ## Correct on all targets - **Android / iOS:** `insets.top` (status-bar height / notch) pushes content clear; the inset strip still fills with the themed surface, so no content sits under the clock. - **Web:** `insets.top` is 0 → `paddingTop` collapses to the existing 16; the permanent (≥720px) and narrow-web slide-in sidebars are unchanged. Top-only, matching the reported bug and the `MobileHeader` precedent (bottom inset out of scope). ## Verification - `pnpm -F @carol/client typecheck` — passes. - Manual: open the drawer on Android — brand row now sits below the status bar. Closes #295 🤖 Generated with [Claude Code](https://claude.com/claude-code)

james added 1 commit 2026-06-26 22:25:32 +00:00

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

The drawer surface paints from y=0 (under Android's translucent status
bar / behind the iOS notch), but the Sidebar root only used
paddingVertical: 16 and never consumed the safe-area inset, so the brand
row slid out over the system clock/battery area. Add useSafeAreaInsets()
and set the container paddingTop to 16 + insets.top, mirroring the
MobileHeader inset handling in app/(app)/_layout.tsx. On web insets.top
is 0, so the permanent and narrow-web sidebars are unchanged.

Closes #295

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

james merged commit f12fffaf85 into main 2026-06-26 22:29:00 +00:00

james deleted branch 295-sidebar-safe-area 2026-06-26 22:29:01 +00:00

james referenced this pull request from a commit 2026-06-26 22:29:02 +00:00

Merge pull request 'fix(client): inset the native sidebar below the status bar' (#296) from 295-sidebar-safe-area into main

forgejo-actions commented 2026-06-26 22:29:53 +00:00

Copy link

📊 Test coverage

Patch coverage: no testable lines changed.

Overall (app/, lib/, db/, excluding UI per ADR-0019):

Metric	Value	Soft target
Lines	81.6% ✅	≥ 50%
Branches	72.8% ⚠️	≥ 75%
Functions	91.1%	informational

Soft thresholds per ADR-0019. Coverage is informational and does not block merge.

<!-- coverage-comment --> ## 📊 Test coverage **Patch coverage:** no testable lines changed. **Overall** (`app/`, `lib/`, `db/`, excluding UI per ADR-0019): | Metric | Value | Soft target | |---|---|---| | Lines | 81.6% ✅ | ≥ 50% | | Branches | 72.8% ⚠️ | ≥ 75% | | Functions | 91.1% | informational | Soft thresholds per [ADR-0019](docs/adr/0019-coverage-soft-targets.md). Coverage is informational and does not block merge.

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

area:auth

Authentication and authorization

  

area:ci

Forgejo Actions, build, test, security, release

  

area:db

Database abstraction, migrations, persistence

  

area:infra

Containerization, deployment, foundational tooling

  

area:native

React Native app (Android + Linux Flatpak)

  

area:pwa

PWA / web frontend

  

area:service

Backend service, API routes, persistence

  

epic

High-level tracker; links several feature tickets

  

feature

A user-facing feature

  

foundation

Foundational work that other tickets build on

No labels

area:auth

area:ci

area:db

area:infra

area:native

area:pwa

area:service

epic

feature

foundation

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

2 participants

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

james/carol!296

No description provided.