[wmcparla]

Summary

On iOS the mail, calendar and contacts drawers drew their first frame with the header at the very top of the screen, under the status bar and the Dynamic Island, and jumped down to the right place on the next frame (#130). In a recording of the iOS 26.5 simulator it shows on every opening of a drawer after its first.

The drawer panel was a native SafeAreaView inside the modal's own safe-area provider. The native view learns the insets a few frames after it is mounted, and a drawer's modal is mounted again each time it opens. The panel now takes its padding from useSafeAreaInsets(), which has the insets on the first render (a new provider starts with its parent's). The mail list header was fixed the same way earlier.

Changes

• src/components/DrawerPanel.tsx (new): a View padded top, bottom and left from the provider's insets.
• src/components/SidebarDrawer.tsx, calendar/CalendarSidebarDrawer.tsx, contacts/ContactsSidebarDrawer.tsx: use it in place of the SafeAreaView. The mail sidebar docked in a split layout goes through the same panel and reads the same insets as before.
• src/components/SafeAreaModal.tsx: the comment says the drawers still need the modal's provider.
• src/components/__tests__/modal-safe-area.test.ts: the drawers pad from the insets and hold no native SafeAreaView.

Related issues

Closes #130

Type of change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Documentation update
• Refactor / code quality improvement
• Chore / dependency update / CI change

Checklist

• I have read the Contributing Guide
• My code follows the project's code style and conventions
• npx tsc --noEmit, npx vitest run and npm run i18n:check are clean (this repo has no lint or build script)
• I have tested my changes locally
• I have added or updated documentation if needed (none needed)
• I have updated translations (no new strings)
• I have included screenshots or a screen recording for UI changes

How it was tested

A Release build for the iOS Simulator (iPhone 17 Pro, iOS 26.5, Xcode 26.6), signed in to a test account on a self-hosted Stalwart 1.1.0. A Maestro flow opens and closes each drawer twice while the screen is recorded, and every frame of the recording was looked at. The same flow ran against main at b3b4230 and against this branch.

Drawer	main	This branch
Mail, first opening	header in place	header in place
Mail, second opening	first frame under the status bar	header in place
Calendar, first opening	header in place	header in place
Calendar, second opening	first frame under the status bar	header in place
Contacts, first opening	header in place	header in place
Contacts, second opening	first frame under the status bar	header in place

Also on this branch:

• iPad Pro 11-inch simulator: the docked mail sidebar in landscape and the mail drawer in portrait sit below the status bar.
• Android 16 phone emulator: the three drawers sit below the status bar, the mail drawer on a second opening too.

Not run on a device: an iPhone in landscape, a real iPhone (the recording is of the simulator, which drew fewer frames than a phone does), a right-to-left layout, and Android with three-button navigation.

Seen in the same recordings and not changed here: switching to the Calendar tab for the first time draws its header under the status bar for a frame in the same way (the screen's own SafeAreaView), on main and on this branch.

Screenshots

The calendar drawer's second opening, frame by frame from the recordings:

🤖 Generated with Claude Code

[rathlinus]

Thanks, merged.