diff --git a/src/uix/eidos/components/combobox/combobox.css b/src/uix/eidos/components/combobox/combobox.css index dba1ed552..75e2ce386 100644 --- a/src/uix/eidos/components/combobox/combobox.css +++ b/src/uix/eidos/components/combobox/combobox.css @@ -507,18 +507,37 @@ display: none; } -/* Make the Control breathe vertically when chips are present so the - * input + chips stack visually instead of clipping. */ +/* Material UI Autocomplete pattern — when chips are present, pin the + * right-side affordances absolutely so chips + input wrap freely + * without ever pushing the clear/trigger to a new row. + * + * `--_combobox-affordances-w` reserves the right-padding the + * absolutely-positioned ClearButton + Trigger consume (each is ~26px + * wide with size=md, scaled below for xs/sm/lg/xl). */ [data-combobox-control]:has([data-combobox-selected-tags]:not([data-empty])) { + --_combobox-affordances-w: calc(var(--_combobox-control-height) * 2); + position: relative; padding-block: var(--space-1); + padding-inline-end: calc(var(--_combobox-control-px) + var(--_combobox-affordances-w)); +} + +[data-combobox-control]:has([data-combobox-selected-tags]:not([data-empty])) + [data-combobox-clear-button], +[data-combobox-control]:has([data-combobox-selected-tags]:not([data-empty])) + [data-combobox-trigger] { + position: absolute; + inset-block-start: 50%; + transform: translateY(-50%); } -/* When chips are present, pin the right-side affordances (ClearButton + - * Trigger) to the end of the row so they don't visually float in the - * middle when the input + chips wrap. */ [data-combobox-control]:has([data-combobox-selected-tags]:not([data-empty])) [data-combobox-clear-button] { - margin-inline-start: auto; + inset-inline-end: calc(var(--_combobox-control-px) + var(--_combobox-control-height)); +} + +[data-combobox-control]:has([data-combobox-selected-tags]:not([data-empty])) + [data-combobox-trigger] { + inset-inline-end: var(--_combobox-control-px); } [data-combobox-selected-tag] {