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>
98 lines
4.2 KiB
JavaScript
98 lines
4.2 KiB
JavaScript
// SPDX-FileCopyrightText: 2026 Stan Grams <sjg@haxx.space>
|
|
//
|
|
// SPDX-License-Identifier: GPL-2.0-or-later
|
|
|
|
// What a phone gets. A page that scrolls sideways is a page with something on
|
|
// it nobody will find: the transmit controls spent this whole period laid out
|
|
// at x=400 on a 390 px screen, off the side of a tray 354 px wide, reachable
|
|
// only by a horizontal scroll with nothing to say it was there.
|
|
|
|
import assert from "node:assert/strict";
|
|
import { chromium } from "playwright-core";
|
|
import { startBrowser, startWebFixture } from "./web-fixture.mjs";
|
|
|
|
/* global document, getComputedStyle */
|
|
|
|
const PHONES = [430, 390, 360];
|
|
|
|
const fixture = await startWebFixture({ spectrum: true, tx: true });
|
|
const { browser, page, runtimeErrors } = await startBrowser(chromium);
|
|
|
|
try {
|
|
for (const width of PHONES) {
|
|
await page.setViewportSize({ width, height: 900 });
|
|
await page.goto(fixture.origin, { waitUntil: "domcontentloaded" });
|
|
await page.locator("#content").waitFor({ state: "visible" });
|
|
await page.waitForTimeout(1800);
|
|
|
|
const layout = await page.evaluate((viewport) => {
|
|
const box = (element) => element.getBoundingClientRect();
|
|
// Anything laid out past the right edge of the screen.
|
|
const past = [];
|
|
const walk = (element) => {
|
|
const rect = box(element);
|
|
if (rect.width > 0 && rect.right > viewport + 1) {
|
|
past.push(`${element.tagName.toLowerCase()}${element.id ? `#${element.id}` : ""}`);
|
|
}
|
|
for (const child of element.children) walk(child);
|
|
};
|
|
walk(document.getElementById("content"));
|
|
const tx = document.getElementById("tx-power-col");
|
|
return {
|
|
documentScroll: document.documentElement.scrollWidth,
|
|
past: past.slice(0, 6),
|
|
txRight: tx ? Math.round(box(tx).right) : null,
|
|
txVisible: tx ? getComputedStyle(tx).display !== "none" : false,
|
|
rigSelect: Math.round(box(document.getElementById("header-rig-switch-select")).width),
|
|
};
|
|
}, width);
|
|
|
|
assert.equal(layout.documentScroll, width,
|
|
`the page scrolls sideways at ${width}px (${layout.documentScroll}px wide)`);
|
|
assert.deepEqual(layout.past, [],
|
|
`laid out past the screen at ${width}px: ${layout.past.join(", ")}`);
|
|
if (layout.txVisible) {
|
|
assert.ok(layout.txRight <= width + 1,
|
|
`the transmit controls end at ${layout.txRight}px on a ${width}px screen`);
|
|
}
|
|
// The rig's name was taking 139px of a 338px bar and pushing everything
|
|
// else into the overflow menu.
|
|
assert.ok(layout.rigSelect <= 112,
|
|
`the rig picker is ${layout.rigSelect}px wide at ${width}px`);
|
|
}
|
|
|
|
// Hiding the map's filters leaves the bar, and the bar has to still be
|
|
// there to bring them back — it carries the only button that does.
|
|
await page.setViewportSize({ width: 1400, height: 900 });
|
|
await page.goto(`${fixture.origin}/map`, { waitUntil: "domcontentloaded" });
|
|
await page.locator("#aprs-map .leaflet-pane").first().waitFor({ state: "attached" });
|
|
await page.waitForTimeout(1200);
|
|
await page.locator("#map-overlay-toggle-btn").click();
|
|
await page.waitForTimeout(400);
|
|
const collapsed = await page.evaluate(() => {
|
|
const panel = document.querySelector(".map-overlay-panel");
|
|
const style = getComputedStyle(panel);
|
|
const rect = panel.getBoundingClientRect();
|
|
const button = document.getElementById("map-overlay-toggle-btn").getBoundingClientRect();
|
|
return {
|
|
width: Math.round(rect.width),
|
|
height: Math.round(rect.height),
|
|
opacity: Number(style.opacity),
|
|
visibility: style.visibility,
|
|
display: style.display,
|
|
buttonWidth: Math.round(button.width),
|
|
};
|
|
});
|
|
assert.ok(collapsed.width > 0 && collapsed.height > 0,
|
|
`the collapsed bar measures ${collapsed.width}x${collapsed.height}`);
|
|
assert.equal(collapsed.visibility, "visible", "the collapsed bar is not visible");
|
|
assert.notEqual(collapsed.display, "none", "the collapsed bar is display:none");
|
|
assert.equal(collapsed.opacity, 1, `the collapsed bar is at opacity ${collapsed.opacity}`);
|
|
assert.ok(collapsed.buttonWidth > 0, "Show Filters has no size to click");
|
|
|
|
assert.deepEqual(runtimeErrors, []);
|
|
} finally {
|
|
await browser.close();
|
|
await fixture.close();
|
|
}
|