## 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.
## 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
Víctor Falcón