fix(combobox): inline chips + input flow as siblings via display:contents

`<Combobox.SelectedTags>` 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
`<Combobox.Control>`. 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) <noreply@anthropic.com>
active-uix
dev 5 months ago
parent 87e3d68f86
commit 91b0efc461

@ -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
* `<Combobox.Control>` 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;
}

Loading…
Cancel
Save

Powered by TurnKey Linux.