React Status Bar — Overflow clipping

Set overflow="clip" and the viewport measures itself and hides the least important entries one at a time when they don't fit, bringing them back as space returns — like VS Code's status bar.

Shrink the bar

width: 560px

Drag the width slider (or the box's bottom-right corner). With clip, the highest priority numbers go first — ⚠ 3 (p7), then UTF-8 (p6) — and the inner entries clip before the outer ones. The data-clipped attribute adds the …. Flip to visible to see the same entries simply overflow and get cut off.

tsx

<StatusBarViewport mode="stack" separator="•" overflow="clip" />

<StatusBar align="start" priority={0}>main ✓</StatusBar>
<StatusBar align="start" priority={5}>Spaces: 2</StatusBar>
<StatusBar align="start" priority={6}>UTF-8</StatusBar>
<StatusBar align="end" priority={0}>Ln 12, Col 4</StatusBar>
<StatusBar align="end" priority={4}>Prettier</StatusBar>
<StatusBar align="end" priority={7}>⚠ 3</StatusBar>

Required CSS

Clipping needs a single-line flex bar. Add position: relative so the hidden measurement layer stays contained.

css

.statusbar--clip {
  position: relative; /* contains the off-screen measure layer */
  flex-wrap: nowrap;
  overflow: hidden;
}
/* Optional: hint that entries are hidden. */
.statusbar[data-clipped]::after { content: "…"; opacity: 0.5; }