fix(test): build a genuinely short Run menu instead of assuming the stock one fits

The nightly browser suite failed in run-mode-menu-scroll: the short-menu case
opened the stock menu and asserted it needs no scrollbar on a 390x640 phone.
The GitHub Copilot entry made the stock CLI list eleven rows, 562px of content
against a 538px cap, so the menu now scrolls there, which is the cap-and-scroll
behaviour the CSS is written for (and what the other two cases verify). Every
further CLI would have broken the same assumption again.

The case now hides the whole CLI block (the container, since its buttons are
rebuilt from the registry) and also checks the "not stretched" half of its name:
the border-box height must stay under max-height. clientHeight would not do,
since it leaves out the border and a menu stretched to its cap reads just under it.

Visible side effect worth knowing: on a phone about 640px tall the stock Run
dropdown now scrolls by roughly one row. At 900px it fits (564px) unscrolled.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Codeman maintainer committed 2026-10-20 03:08:33 +02:00
1 parent e63bb65b36
commit 6e7dee75eb
1 file changed
+19 -2
+19 -2
View File
@@ -5,6 +5,10 @@
* Before the fix the menu (anchored `bottom: 100%`) had no max-height and no overflow, so with * Before the fix the menu (anchored `bottom: 100%`) had no max-height and no overflow, so with
* enough entries its top ran off the top of the screen and could not be scrolled to. * enough entries its top ran off the top of the screen and could not be scrolled to.
* *
* The stock CLI list alone outgrows this 640px-tall phone (eleven entries since GitHub Copilot),
* so the short-menu case hides the whole CLI block rather than assuming the stock menu fits:
* every new CLI would otherwise break that assumption again.
*
* Browser-driven, so excluded from `npm run test:ci` (config/test-suites.ts). Run locally: * Browser-driven, so excluded from `npm run test:ci` (config/test-suites.ts). Run locally:
* npm run test:browser -- test/run-mode-menu-scroll.browser.test.ts * npm run test:browser -- test/run-mode-menu-scroll.browser.test.ts
* *
@@ -69,6 +73,7 @@ describe('Run dropdown on a phone', () => {
scrollHeight: menu.scrollHeight, scrollHeight: menu.scrollHeight,
clientHeight: menu.clientHeight, clientHeight: menu.clientHeight,
viewport: window.innerHeight, viewport: window.innerHeight,
maxHeight: parseFloat(getComputedStyle(menu).maxHeight),
overflowY: getComputedStyle(menu).overflowY, overflowY: getComputedStyle(menu).overflowY,
}; };
}); });
@@ -118,11 +123,23 @@ describe('Run dropdown on a phone', () => {
it('a short menu is not stretched or squashed (no scrollbar when it fits)', async () => { it('a short menu is not stretched or squashed (no scrollbar when it fits)', async () => {
await openWithEntries(0); await openWithEntries(0);
// Hide the container, not its buttons: those are rebuilt from the registry and would lose a
// per-button style on the next render.
await page.evaluate(() => { await page.evaluate(() => {
document.getElementById('runModeCliOptions')!.style.display = 'none';
document.getElementById('runModeCustomModelSep')!.style.display = 'none'; document.getElementById('runModeCustomModelSep')!.style.display = 'none';
document.getElementById('runModeCustomModelHeader')!.style.display = 'none'; document.getElementById('runModeCustomModelHeader')!.style.display = 'none';
}); });
const g = await geometry(); try {
expect(g.scrollHeight).toBeLessThanOrEqual(g.clientHeight + 1); const g = await geometry();
// Border-box height: clientHeight leaves out the border, so a menu stretched to its cap
// would still read just under it.
expect(g.bottom - g.top).toBeLessThan(g.maxHeight); // not stretched to its cap
expect(g.scrollHeight).toBeLessThanOrEqual(g.clientHeight + 1); // not squashed into a scrollbar
} finally {
await page.evaluate(() => {
document.getElementById('runModeCliOptions')!.style.display = '';
});
}
}); });
}); });