## 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. |
||
|---|---|---|
| .. | ||
| components | ||
| contexts | ||
| hooks | ||
| layouts | ||
| lib | ||
| pages | ||
| providers | ||
| services | ||
| types | ||
| utils | ||
| app.tsx | ||
| ssr.tsx | ||