sjg
14ad6e241b
On a 390 px screen the transmit controls were laid out at x=400, off the side of a tray 354 px wide: present, invisible, and reachable only by a horizontal scroll with nothing to say it was there. The page scrolled sideways by a dozen pixels as well. Three causes, each in a different place. A container query at the end of the stylesheet re-imposes `flex-wrap: wrap` on a narrow tray's rows. That is right while a row runs left to right; below the phone breakpoint the row is a column, and wrapping a column starts a *second column* — which is what put the transmit controls beside the tray rather than under it. The rule outranks the phone one, two classes to its one, and sits later in the file, so it now excludes itself below that breakpoint rather than being overridden. The tray is a grid, and a grid column sizes to its content. One row wider than the screen — the mode picker, six buttons across — dragged the whole tray out with it. `minmax(0, 1fr)` lets the column be as narrow as the phone and the rows wrap inside it. The wavelength and signal-strength readouts are given the width of their column on narrow screens, but with padding on a content box that is the column's width plus the padding. Those dozen pixels were the page's sideways scroll. They are border-box now. Also: the rig picker was taking 139 px of a 338 px bar, pushing the rest of the top bar into the overflow menu. It is capped and ellipsised on phones, with the full name still in the menu it opens. The map's filter bar, collapsed, keeps both its anchors and shrinks inside them rather than dropping `left` to be sized by shrink-to-fit, and no longer asks for a compositing layer it does not need. An absolutely positioned, backdrop-filtered, composited box sizing itself from its content is the shape of thing that renders as nothing on an engine other than the one it was written against — which is what Edge does with it. Unverified there: this machine has no Edge to test with. tests/mobile-layout.mjs holds the page to it at 430, 390 and 360 px: no sideways scroll, nothing laid out past the right edge, the transmit controls inside the screen, the rig picker within its cap — and the collapsed filter bar still on screen with a button to bring the filters back. The SSTV panel test stamped its picture with a fixed date, which the panel's own retention window dropped once that date was a day old. It uses a recent stamp now. Signed-off-by: Stan Grams <sjg@haxx.space>
29 lines
1.1 KiB
JSON
29 lines
1.1 KiB
JSON
{
|
|
"name": "trx-frontend-http-web",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"type": "module",
|
|
"engines": {
|
|
"node": ">=20"
|
|
},
|
|
"scripts": {
|
|
"build": "node build.mjs",
|
|
"generate-types": "cargo run -p trx-frontend-http --example generate_typescript",
|
|
"typecheck": "tsc --project tsconfig.json && tsc --project tsconfig.worker.json",
|
|
"lint": "eslint \"src/**/*.ts\" \"tests/**/*.mjs\" build.mjs --no-error-on-unmatched-pattern",
|
|
"test": "node --test tests/*.test.mjs",
|
|
"test:browser": "node tests/browser-smoke.mjs && node tests/spectrum-layout.mjs && node tests/decode-flow.mjs && node tests/tune-links.mjs && node tests/mobile-layout.mjs",
|
|
"verify-generated": "npm run generate-types && npm run build && git diff --exit-code -- ../assets/web/generated src/api/generated.ts"
|
|
},
|
|
"devDependencies": {
|
|
"@eslint/js": "9.39.2",
|
|
"@types/leaflet": "1.9.22",
|
|
"esbuild": "0.25.12",
|
|
"eslint": "9.39.2",
|
|
"globals": "16.5.0",
|
|
"playwright-core": "1.62.1",
|
|
"typescript": "5.9.3",
|
|
"typescript-eslint": "8.51.0"
|
|
}
|
|
}
|