Fixed/sticky elements don't obscure content on small screens

A 64px fixed header with no corresponding top padding on <main> hides the first 64 pixels of every page — headlines cut off, form labels disappear, the top of a modal sits beneath the header. A fixed cookie banner or chat widget at the bottom does the same thing in reverse, covering the footer and any sticky CTA. The fix is trivial but easy to overlook because the bug is invisible on desktop where scroll position forgives the overlap.

For every fixed or sticky element, add matching padding to the adjacent content. Store the element's height as a CSS variable so one source controls both the height and the offset. Audit src/app/layout.tsx and any persistent UI chrome components.

:root { --header-height: 64px; }
main { padding-top: var(--header-height); }

• ID: mobile-responsiveness.mobile-ux.no-fixed-elements-overlap

• Severity: medium

• What to look for: Check for fixed or sticky positioned elements: headers, footers, cookie banners, chat widgets, CTA bars. Verify that the main content has adequate top/bottom padding or margin to account for these elements on small screens. Check that fixed footers or bottom bars don't overlap scrollable content.

• Pass criteria: Count all fixed or sticky positioned elements (position: fixed, position: sticky, Tailwind fixed, sticky). For each, measure its declared height and verify the adjacent content area has matching padding or margin of at least the element's height. Report: "X fixed/sticky elements found; X of X have matching content offsets." No more than 0 fixed/sticky elements may lack a corresponding content offset.

• Fail criteria: At least 1 fixed header, footer, or bottom bar obscures content with no padding offset, making portions of the page permanently inaccessible on mobile.

• Skip (N/A) when: Never.

• Detail on fail: "Fixed header is 64px tall but main content has no top padding — first 64px of content is obscured on scroll, 1 of 2 fixed elements lacks offset".

• Remediation:

  :root { --header-height: 64px; }
  main { padding-top: var(--header-height); }
  

  In Tailwind:

  <header class="fixed top-0 left-0 right-0 h-16 z-50">...</header>
  <main class="pt-16">...</main>