From dbf262131448eda18d096b82478436f9328cacbd Mon Sep 17 00:00:00 2001
From: Henrik <henrik092@users.noreply.github.com>
Date: Sun, 29 Mar 2026 18:53:23 +0000
Subject: [PATCH] fix(web): add safe-area-top padding to settings header on
 mobile

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.
---
 apps/web/src/routes/settings.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/routes/settings.tsx b/apps/web/src/routes/settings.tsx
index 45096fd6d6..de3a70e294 100644
--- a/apps/web/src/routes/settings.tsx
+++ b/apps/web/src/routes/settings.tsx
@@ -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">
             <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>