[WC-3409] Combobox: prevent 1px collapse#2237
Conversation
yordan-st
force-pushed
the
fix/WC-3409_combobox-bug
branch
from
afca5ab to
84a04df
Compare
yordan-st
changed the title
| const scss = readFileSync(join(__dirname, "../ui/Combobox.scss"), "utf-8"); | ||
|
|
||
| describe("Combobox SCSS — flex collapse fix (WC-3409)", () => { | ||
| test(".widget-combobox has min-width: 15ch", () => { |
There was a problem hiding this comment.
Testing what is in the CSS file feels over the top.
| └─ .widget-combobox-input (max-width:0 unfocused, width:1px multiselect inactive) | ||
| ``` | ||
|
|
||
| The user created `.row-center`. Mendix injected `.form-group.no-columns` as an intermediate wrapper. That wrapper has no explicit width and becomes a column-direction flex container. Inside it, `flex-grow:1` on `.widget-combobox` distributes height, not width. The widget's width is sized by content, and `min-width: min-content` resolves to ~0 because `.widget-combobox-selected-items` has `min-width: 0` (needed for multiselect tag wrapping). |
There was a problem hiding this comment.
How other input widgets, like text box handle this? Maybe atlas has to be fixed instead of it has to be a combination of fixes in two places.
There was a problem hiding this comment.
Investigated further. Atlas's min-width: 50px on .form-control does reach the combobox but 50px is too small. Therefore it seems collapsed.
What should the correct minimum be in Atlas? My widget-level fix used 15ch (~160px at default font) which felt reasonable for a text input. Happy to implement whatever value makes sense for atlas. just need a steer on the number.
There was a problem hiding this comment.
I think we should fix it in the .form-control level, override this 50px with a value that is more applicable to combobox. So inputs behave consistently.
|
|
||
| `packages/pluggableWidgets/combobox-web/src/ui/Combobox.scss` — `.widget-combobox` rule (line 21). | ||
|
|
||
| Replace `min-width: min-content` with `min-width: 15ch`. |
There was a problem hiding this comment.
It as 0, not min-content if I see correctly.
|
|
||
| The user created `.row-center`. Mendix injected `.form-group.no-columns` as an intermediate wrapper. That wrapper has no explicit width and becomes a column-direction flex container. Inside it, `flex-grow:1` on `.widget-combobox` distributes height, not width. The widget's width is sized by content, and `min-width: min-content` resolves to ~0 because `.widget-combobox-selected-items` has `min-width: 0` (needed for multiselect tag wrapping). | ||
|
|
||
| `min-width: 15ch` is an explicit value — it does not ask children, so the children's suppressed minimums are irrelevant. |
There was a problem hiding this comment.
A too small value like 5 or to high like 42 would make it too narrow or wide in most cases. Thought 15 is a general sweet spot, considering the average font size.
2 participants
Summary
align-items: center.form-group.no-columns(column flex, no explicit width) between the user's container and.widget-combobox.flex-grow: 1distributes height in a column container, not width. Children suppressmin-widthto ~0 viamin-width: 0on.widget-combobox-selected-items(intentional, needed for multiselect tag wrapping)min-width: 15chon.widget-combobox— explicit value does not ask children, breaking the collapse chain.chscales with font-size rather than using pxChanges
src/ui/Combobox.scss—min-width: 15chon.widget-comboboxroot rulesrc/__tests__/ComboboxStyles.spec.ts— unit test updated to assert15che2e/Combobox.spec.js— E2E regression tests added (pending Studio Pro test page at/p/combobox-flex-layout)openspec/changes/fix-combobox-flex-collapse/— design artifacts with corrected root cause analysisTest plan
display: flex; flex-flow: row; align-items: center(e.g. add a classrow-centerand define it in a custom stylesheet).Override
To restore previous behavior:
.widget-combobox { min-width: 0; }in app CSS.