sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/app.js
+3
View File
@@ -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();
};
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+21
View File
@@ -1652,6 +1652,27 @@ small { color: var(--text-muted); }
.tab-bar-nav.nav-icons-only .tab .tab-more-icon { display: block; }
.tab-bar-nav.nav-icons-only .tab { padding: 0.45rem 0.55rem; }
}
/* Last resort, past icons: something in the bar has to absorb the shortfall,
and by default that is the tab strip — it may shrink below its content, so
its tabs keep full width and run under the controls, unreachable. The
identity block takes it instead, ellipsised: a clipped station name is still
readable, a destination hidden under the controls is not. */
.tab-bar.bar-tight .header-main {
flex-shrink: 1;
min-width: 0;
}
.tab-bar.bar-tight .header-text {
min-width: 0;
}
.tab-bar.bar-tight .title,
.tab-bar.bar-tight .subtitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tab-bar.bar-tight .tab-bar-nav {
flex-shrink: 0;
}
/* The selected destination is boxed, not underlined — the same treatment the
mobile bottom nav already used, so one navigation model reads the same at
every width. The transparent border is on the base so switching tabs moves