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) ─ */