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/frontend/tests/browser-smoke.mjs
+11 -8
View File
@@ -213,16 +213,19 @@ try {
assert.ok(menu.onTop, "menu is painted underneath the page");
// Wider text than this machine renders. The checks above passed on macOS
// while CI, whose system font is wider, put the tab strip 9px into the
// controls: the bar had run out of controls to move into the overflow menu
// and the tabs kept their full width anyway. Scaling the bar's own text
// reproduces that on any machine. The tabs carry their font size themselves,
// so the parent size alone does not cascade to them.
// while CI, whose system font is wider, put the tab strip into the controls:
// the bar had run out of moves and the tabs kept their full width anyway.
// Every piece of text in the bar is scaled, not just the tabs — the identity
// block is what runs out of room first at 1100px, where the bookmark gutters
// make the card narrower than it is at 900px.
const scale = 1.9;
await page.addStyleTag({ content: `
.tab-bar { font-size: 160%; }
.tab-bar .tab, .tab-bar select, .tab-bar button { font-size: 1.52rem; }
.tab-bar .title { font-size: ${1.05 * scale}rem !important; }
.tab-bar .subtitle { font-size: ${0.78 * scale}rem !important; }
.tab-bar .tab { font-size: ${0.95 * scale}rem !important; }
.tab-bar select, .tab-bar button { font-size: ${0.95 * scale}rem !important; }
` });
for (const width of [1440, 1280, 1100]) {
for (const width of [1440, 1280, 1100, 900]) {
await page.setViewportSize({ width, height: 900 });
await page.waitForTimeout(250);
const crowded = await page.evaluate(() => {