Design system · Component review 14

Demo viewport

Viewport-dependent classes have to run inside a viewport whose width really changes. This comparison keeps one authored Save button, the actual preset breakpoint and an iframe for both shared treatments.

Adopted default: the shared DemoViewport now distinguishes the iframe stage from its controls with a fine frame. Switch between Below sm and At sm, or use the slider; the button padding and computed readout should change with the actual iframe width.

Responsive padding

Both shared treatments use the same iframe document and width controls. The candidate changes only the surrounding chrome.

01

Original Guide

Breakpoint-specific preview

Viewport: 833px

The Guide already offers two native viewport choices and a live width readout. Its established presentation stays in place.

02

Previous

Shared iframe viewport

Current responsive button controls

The previous viewport offered preset widths, a range control and Fit. Its scroll boundary was visually implicit.

03

Adopted

Bounded specimen viewport

Candidate responsive button controls

A hairline around the frame and a quieter control deck distinguish the actual iframe width from the striped outer demo without changing that width.

Actual Reference use

The padding reference crosses the same breakpoint inside an iframe, preserving the class and its browser behavior.

Open /reference/padding
Apply conditionally
padding: Apply conditionally controls
Blue surrounds the neutral content. The content inset reports physical left and top padding; the padding value lists the physical sides.

The Reference keeps control of its teaching geometry. Viewport decoration must not make an outer container query look like a real media query.