From 6671d89ea10638983a5ba10a718ea16dde982697 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Mon, 15 Jun 2026 18:23:26 +0200
Subject: [PATCH] fix(layout): keep bottom padding while floating nav is
 visible (#537)

## Problem

On mobile we pad the bottom of pages so content clears the floating nav
bar.

That bar isn't mobile-only though. It stays visible up to the `md`
breakpoint (`md:hidden`, so below 768px). The padding stopped earlier,
at `sm` (`sm:pb-0`, 640px and up). Between 640 and 768px the bar showed
with nothing behind it and overlapped page content.

## Fix

Move the padding breakpoint from `sm` to `md`, so the padding lasts
exactly as long as the bar does:

```diff
- className="pt-safe overflow-x-hidden pb-[90px] sm:pb-0"
+ className="pt-safe overflow-x-hidden pb-[90px] md:pb-0"
```

Both flip at `md` now.

## Testing

Only a Tailwind class swap, no JS changed. Resize the window between 640
and 768px: the nav no longer covers content.
---
 resources/js/layouts/app/app-sidebar-layout.tsx   | 2 +-
 tests/Feature/AuthenticatedLayoutSafeAreaTest.php | 2 +-
 tests/Performance/PageQueryCountTest.php          | 7 ++++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/resources/js/layouts/app/app-sidebar-layout.tsx b/resources/js/layouts/app/app-sidebar-layout.tsx
index a00bd4d4..d87290d5 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="pt-safe overflow-x-hidden pb-[90px] sm:pb-0"
+                className="pt-safe overflow-x-hidden pb-[90px] md:pb-0"
             >
                 <AppSidebarHeader
                     breadcrumbs={breadcrumbs}
diff --git a/tests/Feature/AuthenticatedLayoutSafeAreaTest.php b/tests/Feature/AuthenticatedLayoutSafeAreaTest.php
index ae75233a..820899fa 100644
--- a/tests/Feature/AuthenticatedLayoutSafeAreaTest.php
+++ b/tests/Feature/AuthenticatedLayoutSafeAreaTest.php
@@ -4,6 +4,6 @@ test('authenticated sidebar layout applies the safe area inset on the scrolling
     $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"')
+    expect($layout)->toContain('className="pt-safe overflow-x-hidden pb-[90px] md:pb-0"')
         ->and($header)->not->toContain('pt-safe');
 });
diff --git a/tests/Performance/PageQueryCountTest.php b/tests/Performance/PageQueryCountTest.php
index f31f8d7b..14f5f4a5 100644
--- a/tests/Performance/PageQueryCountTest.php
+++ b/tests/Performance/PageQueryCountTest.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Enums\AccountType;
 use App\Models\Account;
 use App\Models\AccountBalance;
 use App\Models\Transaction;
@@ -44,7 +45,11 @@ test('accounts index page does not exceed query threshold', function () {
 });
 
 test('account show page does not exceed query threshold', function () {
-    $account = $this->user->accounts()->first();
+    $account = Account::factory()->create([
+        'user_id' => $this->user->id,
+        'currency_code' => $this->user->currency_code,
+        'type' => AccountType::Checking,
+    ]);
 
     assertMaxQueries(18, function () use ($account) {
         $this->get(route('accounts.show', $account))->assertOk();