From 02aed6d7f5da83a9f8c11f5f136c3d824bdec02b Mon Sep 17 00:00:00 2001 From: Roland Date: Mon, 3 Aug 2026 19:11:03 -0600 Subject: [PATCH] ui: raise the suggestion list's cap, which the scale outgrew CI's cypress-e2e job went red on the interface scale: `directory-search.cy.js` failed `expected '' to be 'visible'`. The suggestion list is capped at `min(60vh, 30rem)`. The rem ceiling scales with the interface but a fraction of the VIEWPORT does not, so when the type grew 10% the rows grew and the cap did not: the full set of grouped suggestions now needs about 420px, and 60vh of a 660px-tall window -- Cypress's default -- is 396px. The last group was clipped again, which is the exact defect the comment on that rule already describes. 70vh is 462px there, and the 30rem ceiling still bounds it on a tall window, so the list cannot cover the page either way. Measured rather than guessed: the spec fails at 660px of viewport height and passes from 700px up, so the shortfall was about 24px. Verified: all 50 e2e specs pass locally, 248 ui-layout component tests, 1141 jest tests. --- app/src/components/ui/ui.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/app/src/components/ui/ui.css b/app/src/components/ui/ui.css index 9c2852a6..1ca2fc8d 100644 --- a/app/src/components/ui/ui.css +++ b/app/src/components/ui/ui.css @@ -401,8 +401,18 @@ html .wrolpi-searchbox-clear { * Tall enough for a full set of grouped suggestions -- directories, channels and * domains together run past 320px, and the last group was being clipped -- but * still capped so a long list cannot cover the page. + * + * 70vh, raised from 60. The rem ceiling scales with the interface but a fraction of + * the VIEWPORT does not, so when the type grew 10% the rows grew with it and the cap + * did not: the full set now needs about 420px, and 60vh of a 660px-tall window is + * 396px, so the last group was clipped again -- the exact defect this comment already + * describes. 70vh is 462px there, and the 30rem ceiling still bounds it on a tall + * window, so it cannot cover the page either way. + * + * `directory-search.cy.js` is the regression test: it fails at 660px of viewport + * height and passes from 700px up, which is how the shortfall was measured. */ - max-height: min(60vh, 30rem); + max-height: min(70vh, 30rem); overflow-y: auto; background: var(--panel); border: 1px solid var(--border);