From b505d68ef0ac4d52ee94a85b4e6b113c9d8d35c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Mon, 13 Apr 2026 13:59:05 +0100
Subject: [PATCH] fix: keep iOS content below the notch (#280)

## Summary
- move the top safe-area inset from the mobile header to the shared
authenticated content shell
- keep scrolling content on iOS sidebar pages from sliding under the
notch
- add a focused regression test for the shared layout safe-area
placement

## Testing
- vendor/bin/pint --dirty --format agent
- php artisan test --compact
tests/Feature/AuthenticatedLayoutSafeAreaTest.php
---
 resources/js/components/app-sidebar-header.tsx    | 2 +-
 resources/js/layouts/app/app-sidebar-layout.tsx   | 2 +-
 tests/Feature/AuthenticatedLayoutSafeAreaTest.php | 9 +++++++++
 3 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 tests/Feature/AuthenticatedLayoutSafeAreaTest.php

diff --git a/resources/js/components/app-sidebar-header.tsx b/resources/js/components/app-sidebar-header.tsx
index 36c63423..897206f4 100644
--- a/resources/js/components/app-sidebar-header.tsx
+++ b/resources/js/components/app-sidebar-header.tsx
@@ -30,7 +30,7 @@ export function AppSidebarHeader({
         (hasEncryptedTransactions || hasEncryptedAccounts);
 
     return (
-        <header className="pt-safe flex min-h-16 shrink-0 items-center justify-between gap-2 border-b border-sidebar-border/50 px-5 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:min-h-12 sm:px-6 md:px-4">
+        <header className="flex min-h-16 shrink-0 items-center justify-between gap-2 border-b border-sidebar-border/50 px-5 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:min-h-12 sm:px-6 md:px-4">
             <div className="flex items-center gap-2 sm:hidden">
                 {mobileLeading ?? <AppLogo mobile />}
             </div>
diff --git a/resources/js/layouts/app/app-sidebar-layout.tsx b/resources/js/layouts/app/app-sidebar-layout.tsx
index f4b399ef..a00bd4d4 100644
--- a/resources/js/layouts/app/app-sidebar-layout.tsx
+++ b/resources/js/layouts/app/app-sidebar-layout.tsx
@@ -23,7 +23,7 @@ export default function AppSidebarLayout({
             <AppSidebar />
             <AppContent
                 variant="sidebar"
-                className="overflow-x-hidden pb-[90px] sm:pb-0"
+                className="pt-safe overflow-x-hidden pb-[90px] sm:pb-0"
             >
                 <AppSidebarHeader
                     breadcrumbs={breadcrumbs}
diff --git a/tests/Feature/AuthenticatedLayoutSafeAreaTest.php b/tests/Feature/AuthenticatedLayoutSafeAreaTest.php
new file mode 100644
index 00000000..ae75233a
--- /dev/null
+++ b/tests/Feature/AuthenticatedLayoutSafeAreaTest.php
@@ -0,0 +1,9 @@
+<?php
+
+test('authenticated sidebar layout applies the safe area inset on the scrolling shell', function () {
+    $layout = file_get_contents(resource_path('js/layouts/app/app-sidebar-layout.tsx'));
+    $header = file_get_contents(resource_path('js/components/app-sidebar-header.tsx'));
+
+    expect($layout)->toContain('className="pt-safe overflow-x-hidden pb-[90px] sm:pb-0"')
+        ->and($header)->not->toContain('pt-safe');
+});