Skip to content

fix(web): add safe-area-top padding to settings header on mobile #1552

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
henrik092 wants to merge 1 commit into
base: main
Choose a base branch
from
+1 −1
Open

fix(web): add safe-area-top padding to settings header on mobile #1552

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/web/src/routes/settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function SettingsContentLayout() {
<SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground isolate">
<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">
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector bot Mar 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Define safe-area var before applying header top padding

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 👍 / 👎.

Copy link
Copy Markdown
Contributor

@cursor cursor bot Mar 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Fix in Cursor Fix in Web

<div className="flex items-center gap-2">
<SidebarTrigger className="size-7 shrink-0 md:hidden" />
<span className="text-sm font-medium text-foreground">Settings</span>
Expand Down
Loading