From 830025b4adba8e697831fdd460c375cf869b93bf Mon Sep 17 00:00:00 2001 From: dev Date: Sat, 23 May 2026 18:02:40 +0200 Subject: [PATCH] fix(eidos listbox): add max-block-size + overflow-y auto MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Listbox container grew unbounded when items overflowed — long lists just stretched the parent layout. Adds: - Default `max-block-size: min(60vh, 22rem)` via `--_listbox-max-height` token (consumer can override via inline style). - `overflow-y: auto` + `overscroll-behavior: contain` so the listbox becomes its own scroll context. - Horizontal orientation switches axes: removes the block cap and uses `overflow-x: auto` instead so a single-row list never clips. Verified: with 8 items at md size, container caps at 352px with scrollHeight 378px — scrollbar present and working. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/uix/eidos/components/listbox/listbox.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/uix/eidos/components/listbox/listbox.css b/src/uix/eidos/components/listbox/listbox.css index 701c7f134..76ccd9a85 100644 --- a/src/uix/eidos/components/listbox/listbox.css +++ b/src/uix/eidos/components/listbox/listbox.css @@ -21,6 +21,7 @@ --_listbox-item-height: var(--control-height-md); --_listbox-item-px: var(--space-3); --_listbox-item-font-size: var(--font-size-sm); + --_listbox-max-height: min(60vh, 22rem); --_listbox-accent: var(--color-primary-solid); --_listbox-accent-soft: var(--color-primary-element); --_listbox-accent-text: var(--color-content-on-solid); @@ -37,6 +38,15 @@ font-size: var(--_listbox-item-font-size); line-height: var(--leading-ui); outline: none; + /* + * Vertical scroll for tall lists. Default cap is min(60vh, 22rem) — + * generous but bounded. Consumer overrides via inline style + * (e.g. `style="--_listbox-max-height: 40rem;"`) or by wrapping in a + * fixed-height container. + */ + max-block-size: var(--_listbox-max-height); + overflow-y: auto; + overscroll-behavior: contain; } [data-listbox][data-block] { @@ -48,6 +58,10 @@ flex-direction: row; flex-wrap: wrap; align-items: center; + /* Single row across the viewport — scroll inline, not block. */ + max-block-size: none; + overflow-y: visible; + overflow-x: auto; } /* ── Variant — surface (default) ─ */