From 64bbe9b158c16cfcbc1225e7dd7d7d038018f87e Mon Sep 17 00:00:00 2001 From: dev Date: Fri, 22 May 2026 14:35:45 +0200 Subject: [PATCH] fix(combobox): pin clear+trigger absolute when chips present (MUI pattern) When `` has at least one chip, anchor the ClearButton + Trigger absolutely at the right edge of the Control (MUI Autocomplete pattern). Chips + input can now wrap freely without ever pushing the right-side affordances to a new row. `--_combobox-affordances-w` reserves the right-padding the absolutely-positioned buttons consume, scaled to the control's current height token. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../eidos/components/combobox/combobox.css | 31 +++++++++++++++---- 1 file changed, 25 insertions(+), 6 deletions(-) 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] {