rt/wrolpi
1
0
Fork 0
mirror of https://github.com/lrnselfreliance/wrolpi.git synced 2026-10-26 19:01:39 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui: raise the suggestion list's cap, which the scale outgrew

Browse source 
CI's cypress-e2e job went red on the interface scale: `directory-search.cy.js` failed
`expected '<div.wrolpi-searchbox-result-title>' 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.
This commit is contained in:
Roland 2026-08-03 19:11:03 -06:00
parent 7d602f7ea8
commit 02aed6d7f5
No known key found for this signature in database
GPG key ID: 1BA620CE6C9A4680
1 changed files with 11 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

12
app/src/components/ui/ui.css
View file

@ -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);