FocusClearOfOverlays

Scrolls a focused control out from under whatever scroll-padding on <html> reserves for: a sticky header, a fixed bar, a consent banner. A browser scrolls only a control that is out of view, so one on screen but under an overlay stays hidden. Mount once, near the root; it renders nothing.

import { FocusClearOfOverlays } from "@evolve-storefront/ui/helpers/focus-clear-of-overlays";

Preview

Under A Fixed BarOpen in Storybook ↗

Usage

// app/[locale]/layout.tsx, once:
<FocusClearOfOverlays />

/* global.css: reserve what the overlays cover. */
html { scroll-padding-bottom: var(--consent-banner-height, 0px); }

Props

No props of its own.