[fix](trx-frontend-http): let the header identity give way before the tabs

CI still put the tab strip into the controls, now at 1100px — the
narrowest bar in the app, since the bookmark gutters take 9.5rem a side
above that width and leave 756px against 871px at 900px.  With the
controls already in the overflow menu and the tabs already down to
icons, nothing else could give, and what gives by default is the strip:
it is the one item allowed to shrink below its content, so its tabs keep
full width and slide under the controls, out of reach.

The identity block takes the squeeze instead, ellipsised.  A clipped
station name is still readable; a destination hidden underneath the
controls is not.

The guard that was supposed to catch this scaled only the tabs and the
controls, not the title and subtitles — which is exactly what runs out
of room — and skipped 900px.  It now scales every piece of text in the
bar and checks all four widths.  Measured across text scales from 1.0 to
3.0 at each width, the bar keeps its 16px allowance everywhere; before
this, 1.6 and above overlapped at 1100px.

Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
sjg
2026-08-03 22:40:36 +02:00
parent f95f3d0104
commit 730f129404
4 changed files with 41 additions and 8 deletions
@@ -819,7 +819,9 @@ function elementById(id) {
};
const reflowOverflow = () => {
const nav = document.querySelector(".tab-bar-nav");
const bar = actions.closest(".tab-bar");
nav?.classList.remove("nav-icons-only");
bar?.classList.remove("bar-tight");
overflowOrder.forEach((selector) => {
const element = menu.querySelector(selector);
if (element) actions.insertBefore(element, wrap);
@@ -833,6 +835,7 @@ function elementById(id) {
menu.appendChild(element);
}
if (nav && !barFits()) nav.classList.add("nav-icons-only");
if (bar && !barFits()) bar.classList.add("bar-tight");
wrap.hidden = menu.children.length === 0;
if (wrap.hidden) closeMenu();
};