From 91b0efc46195d78b2da2aaa06a34df0cd5eb1afb Mon Sep 17 00:00:00 2001 From: dev Date: Fri, 22 May 2026 14:43:40 +0200 Subject: [PATCH] fix(combobox): inline chips + input flow as siblings via display:contents MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `` was a nested flex container so the input always wrapped to its own row below the entire chip block — wasting the empty space on the last chip row. Use `display: contents` so each chip becomes a direct flex child of ``. Chips + input now share the same wrap context: the input flows on the same row as the last chip when there's room. `[data-empty]` still toggles to `display: none` so empty-state still collapses correctly (and the `:has(...:not([data-empty]))` selector that pins clear/trigger absolutely keeps working). Co-Authored-By: Claude Opus 4.7 (1M context) --- src/uix/eidos/components/combobox/combobox.css | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/uix/eidos/components/combobox/combobox.css b/src/uix/eidos/components/combobox/combobox.css index 44ac3e9a8..188e15084 100644 --- a/src/uix/eidos/components/combobox/combobox.css +++ b/src/uix/eidos/components/combobox/combobox.css @@ -493,16 +493,18 @@ } } -/* SelectedTags — inline chip strip inside the Control for multi mode. - * Hidden when empty so the control collapses back to plain input chrome. */ +/* SelectedTags — logical group for the chip strip. Uses + * `display: contents` so each chip becomes a direct flex child of + * `` instead of being nested in its own row. This + * lets the input flow on the same wrapped row as the last chip + * (Material UI Autocomplete behaviour) rather than always dropping + * to a fresh row below the whole tag block. */ [data-combobox-selected-tags] { - display: inline-flex; - align-items: center; - flex-wrap: wrap; - gap: var(--space-1-5); - min-inline-size: 0; + display: contents; } +/* Empty state — element stays in DOM (so `:has(...:not([data-empty]))` + * still works for layout siblings) but no children render. */ [data-combobox-selected-tags][data-empty] { display: none; }