Skip to content

Keep the settings menu inside the iOS safe areas - #1748

Open
SpikeViper wants to merge 1 commit into
mainfrom
fix/ios-modal-safe-area
Open

SpikeViper wants to merge 1 commit into
mainfrom
fix/ios-modal-safe-area

Conversation

@SpikeViper

Copy link
Copy Markdown
Member

On iPhone, the full-screen settings menu (account settings, planet settings) drew its title bar and close button under the status bar clock. Found while taking the App Store in-app purchase review screenshots.

  • At the phone breakpoint, the menu container pads its contents by env(safe-area-inset-*) while its background still fills the screen, and the close button moves down and in by the same amounts.
  • On larger screens (iPad), the centred menu's max-height and max-width subtract the insets, so it can't reach under the status bar or home indicator.

env(safe-area-inset-*) is 0 in browsers and the desktop apps, so only iOS changes.

Checked on an iPhone 17 Pro simulator (iOS 26.5) running a local Debug build: the "General Settings" bar now sits below the status bar, with the close button clear of it.

On iPhone the full-screen settings menu drew its title bar and close button
under the status bar clock. At the phone breakpoint the menu now pads its
contents by the safe-area insets while its background still fills the
screen, and the close button moves down with them. On larger screens the
centred menu's maximum size leaves the insets clear. The insets are zero in
browsers and on desktop, so only iOS changes.
@SpikeViper
SpikeViper requested a review from a team as a code owner November 6, 2026 03:52
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Nov 6, 2026 •

Copy link
Copy Markdown

Deploying valour-marketing with  Cloudflare Pages  Cloudflare Pages

Latest commit: 3ed5044
Status: ✅  Deploy successful!
Preview URL: https://3c71f3ae.valour-marketing.pages.dev
Branch Preview URL: https://fix-ios-modal-safe-area.valour-marketing.pages.dev

View logs

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying valour with  Cloudflare Pages  Cloudflare Pages

Latest commit: 3ed5044
Status: ✅  Deploy successful!
Preview URL: https://8a4b2f5d.valour.pages.dev
Branch Preview URL: https://fix-ios-modal-safe-area.valour.pages.dev

View logs

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant