admin-ui: let the Page header's leading group and Breadcrumbs nav shrink so long crumbs truncate

[dognose24]

What?

Closes #81297

Lets the admin-ui Page header's leading group and the Breadcrumbs nav shrink (min-width: 0), so a long current crumb truncates with its existing ellipsis instead of widening the whole page into horizontal scrolling.

Why?

The Page header renders its leading group (sidebar toggle, visual, title, breadcrumbs, badges) as a flex item with the flexbox default min-width: auto, and the Breadcrumbs nav is another flex item inside it. A nowrap crumb's min-content therefore propagates up that chain and forces the page wider than its container before the truncation styles that Breadcrumbs already ships (.current's ellipsis, the shrinkable li:last-child) can engage.

Consumers currently have to patch this from outside with structural selectors (e.g. :has(> nav[aria-label]) { min-inline-size: 0 }), which breaks silently as soon as any wrapper — a display: contents one, for instance — lands between the header and the nav. See #81297 for the full analysis; the slot is also set to be reworked under #77039 / #77628, and this pins the propagation fix until those land.

How?

Two links in the chain get min-width: 0:

• page/header.tsx — the leading Stack gains a header-leading class; page/style.module.css sets min-width: 0 on it.
• breadcrumbs/index.tsx — the nav gains a root class; breadcrumbs/style.module.css sets min-width: 0 on it.

No behavior change for content that fits: min-width: 0 only removes the automatic minimum, it does not make anything smaller on its own.

Testing Instructions

1. Render an admin-ui Page with breadcrumbs whose last item is a long unbroken string, e.g.:

   <Page
   	breadcrumbs={
   		<Breadcrumbs
   			items={ [
   				{ label: 'Home', to: '/' },
   				{ label: 'VID_20260731_' + 'a'.repeat( 120 ) + '.mp4' },
   			] }
   		/>
   	}
   />

   (The Breadcrumbs Storybook story with a long last label works as well.)
2. Narrow the viewport below the crumb's natural width.
3. Before: the page grows a horizontal scrollbar and the crumb never truncates. After: the crumb truncates with an ellipsis and the page keeps its width.

Testing Instructions for Keyboard

Tab through the breadcrumb links before and after narrowing the viewport: link order, focusability, and visible focus outlines are unchanged — this PR only allows the existing flex chain to shrink, it adds no interactive changes.

Screenshots

Taken on the Admin UI/Page → WithBreadcrumbs story with the last crumb replaced by a long unbroken string (VID_20260731_aaa….mp4), viewport narrower than the crumb's natural width.

Before	After

Screencasts

Before

2026-08-07.11.50.03.mov

After

2026-08-07.11.49.08.mov

[ciampo]

Could we add screenshots (or even better, screencasts of the responsive behaviour) for both the issue and this PR? It's hard to understand exactly what's the issue and the solution proposed by reading the PR description

[dognose24]

Good call — I've added before/after screenshots to the PR description and mirrored them on #81297 (taken on the Admin UI/Page → WithBreadcrumbs story with the last crumb swapped for a long unbroken string, same viewport width in both shots).

One detail worth calling out: the standalone Breadcrumbs stories truncate correctly even without this change — the defect only appears once the nav sits inside the Page header's flex chain, which is exactly what the two min-width: 0 rules unblock.

Screencast of the responsive behaviour below: first clip is trunk (the crumb refuses to shrink and the page scrolls horizontally as the viewport narrows), second is this branch (the existing ellipsis engages and the page keeps its width).

Before

2026-08-07.11.50.03.mov

After

2026-08-07.11.49.08.mov

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: dognose24 <dognose24@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.