feat(ui): make app header responsive

[delucis]

Summary

Similarly to #7820, this PR aims to tackle a small portion of the work to make the app dashboard responsive, keeping the focus small and incremental. In this case, it tackles the app header.

I borrowed some of the design ideas from #7298, but tried to avoid too many font-size changes so that UI elements continue to share the same font sizes.

• Wraps the app header onto two lines in smaller viewports.

• Hides the app header on editor routes so it doesn’t peek below the editor header (similar to feat(ui): add responsive styling for mobile compatibility #7298).

• Allows the site link URL to be truncated as the viewport shrinks. In general, truncation can be a bad approach for UI because, for example, truncating the label of an action can mislead a user (e.g. imagine truncating “Delete all” to “Delete…”), but in this case I think it may be acceptable because it’s the site URL not a UI string and at most viewport widths, enough of the URL should remain visible to be understood.

• At the smallest viewport widths, brings the navigation labels under the icons to allow an even more compact horizontal display.

• The app header is no longer sticky, for viewports <500px tall. This also an accessibility change as well as related to responsiveness: it ensures on small viewports or for users who zoom the interface, the app header doesn’t get in the way, taking up too much of the screen. (Related to WCAG Success Criterion 1.4.4.)

• Not important on production sites, but I also added a style for the test backend indicator for the smallest viewport. It’s a bit of a kludge, but given this is an indicator that the site is in test mode rather than a genuine part of the CMS UI, I think it’s OK for it to appear in this “overlay” position to let the “real” layout of the app header display at small viewport sizes.

Here’s an example of the header layout reflowing at various viewport widths:

Kapture.2026-05-22.at.00.08.37.mp4

With the English UI strings it works down to 235px wide. I checked a few other languages and most seemed similar. Some languages use two-word phrases on the navigation buttons like “Flujo Editorial” for “Workflow” in Spanish. At the smallest viewport sizes, these wrap, e.g.

250px	350px

Test plan

Tested locally at a range of viewport sizes and app states. Existing tests should pass as this only touches functionality.

Checklist

Please add a x inside each checkbox:

• I have read the contribution guidelines.

A picture of a cute animal (not mandatory but encouraged)