fix(web): add safe-area-top padding to settings header on mobile#1552
fix(web): add safe-area-top padding to settings header on mobile#1552henrik092 wants to merge 1 commit intopingdotgg:mainfrom
Conversation
On devices with a notch or Dynamic Island (iPhone X+), the settings page header renders underneath the system status bar because it lacks safe-area-inset padding. The CSS custom property --safe-area-top is already defined in index.css and used by other headers (ChatView, sidebar sheet, index route). This adds the same padding to the settings header.
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
bot
added
size:XS
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: dbf2621314
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground"> | ||
| {!isElectron && ( | ||
| <header className="border-b border-border px-3 py-2 sm:px-5"> | ||
| <header className="border-b border-border px-3 py-2 pt-[calc(0.5rem+var(--safe-area-top))] sm:px-5"> |
There was a problem hiding this comment.
The new class uses pt-[calc(0.5rem+var(--safe-area-top))], but --safe-area-top is not defined anywhere in this commit (repo-wide search only finds this single reference), so the computed padding-top declaration becomes invalid and is ignored by the browser. In practice this leaves the header at the old py-2 top padding and does not fix notch/Dynamic Island overlap on iOS devices.
Useful? React with 👍 / 👎.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
| <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground"> | ||
| {!isElectron && ( | ||
| <header className="border-b border-border px-3 py-2 sm:px-5"> | ||
| <header className="border-b border-border px-3 py-2 pt-[calc(0.5rem+var(--safe-area-top))] sm:px-5"> |
There was a problem hiding this comment.
Undefined CSS variable breaks header top padding
High Severity
The CSS custom property --safe-area-top is not defined anywhere in the codebase — not in index.css, not in any other stylesheet, and not set by JavaScript. The PR description claims it's "already defined in index.css and used by other headers" but a search of the entire repository confirms it doesn't exist. Since var(--safe-area-top) resolves to the guaranteed-invalid value, the entire calc(0.5rem + var(--safe-area-top)) expression becomes invalid at computed-value time. In Tailwind v4, pt-[...] takes precedence over py-2 for padding-top, so the invalid pt declaration causes padding-top to fall back to its initial value of 0 rather than keeping the 0.5rem from py-2. This results in the header losing all top padding on every device — a regression from the original behavior.
1 participant
On devices with a notch or Dynamic Island (iPhone X+), the settings page header renders underneath the system status bar because it lacks safe-area-inset padding.
The CSS custom property --safe-area-top is already defined in index.css and used by other headers (ChatView, sidebar sheet, index route). This adds the same padding to the settings header.
What Changed
Why
UI Changes
Note
Low Risk
Low risk UI-only change that adjusts layout spacing for mobile safe areas; no logic, data, or security behavior is modified.
Overview
Fixes the Settings page header overlapping the iOS status bar/notch by adding top padding that incorporates
var(--safe-area-top).The change applies to the non-Electron header only and keeps existing spacing by using
pt-[calc(0.5rem+var(--safe-area-top))].Written by Cursor Bugbot for commit dbf2621. This will update automatically on new commits. Configure here.
Note
Add safe-area-top padding to settings header on mobile web
In settings.tsx, the
SettingsContentLayoutheader now appliespt-[calc(0.5rem+var(--safe-area-top))]on non-electron builds to avoid content being obscured by the device notch or status bar.Macroscope summarized dbf2621.