FullBleed

FullBleed paints its child from one viewport edge to the other while the page column stays put. Charts use it to break out of the 800px column. It reserves height in the column and places the child in an overlay that starts at the viewport's left edge.

import FullBleed from "@haloid/azucar/full-bleed";

Height

className sets the height reserved in the column. It must equal the child's own height, or the content below shifts. Charts fix their height with classes such as h-80 md:h-120. Pass the same classes.

Pass fillViewport to extend from the component's position to the viewport bottom. Give the child h-full. Use className for a minimum height, such as min-h-96. The height updates when the window or surrounding layout changes.

Pointer events

By default the overlay ignores the pointer. Only the child's own hit areas respond, so the overlay never covers clicks on content beside the column. Pass interactive when the child must receive the pointer itself, such as a canvas.

Measurement

The overlay's left offset is the anchor's distance from the viewport edge. useLayoutLeft reads it from the offsetLeft chain, not from a bounding rect. Route transitions translate the page while charts mount, and layout offsets ignore transforms, so the offset stays correct.

Example

The frame below is a page with a centered 480px column. The text is column content. The strip inside FullBleed reaches both edges of the frame. The dashed rulers mark the column edges; they belong to the frame, not to the component. It is a frame, not a live demo: the docs card clips overflow, so a demo could not show the breakout.

<main className="mx-auto flex w-120 flex-col gap-6 py-6">
  <div className="text-sm leading-6 text-fg-3">Column text before the breakout.</div>
  <FullBleed className="h-20">
    <div className="h-full bg-bg-4" />
  </FullBleed>
  <div className="text-sm leading-6 text-fg-3">Column text after the breakout.</div>
</main>

Use in north

The accuracy liveline, the accuracy history chart, and the power waterfall wrap their charts in FullBleed. The liveline passes interactive because a canvas handles the pointer itself.