Description
The Dropdown menu's auto-calculated width clips items with rich slotted content (see #1351). getLongestChildWidth in Dropdown.svelte sizes the menu from option.label || (option.hasSlotContent ? option.filter : "") || option.value, measured in ch. A slotted item almost always has a label set (it's shown in the input on selection), so option.label || short-circuits and the slot-text fallback never runs. The menu ends up sized to the label instead of the rendered content, and wider content clips because the menu's overflow-x is auto rather than wrapping.
Measured example: an item with a 13-character label but a 22-character line of slotted content rendered at li clientWidth 185px against scrollWidth 201px — a 16px clip.
This also conflicts with the existing "don't truncate labels" guidance, which says longer text should wrap rather than clip.
A real fix likely needs to measure rendered content width after slot distribution rather than relying on a character-count proxy, since there's no single text value that represents multi-line rich content well (the label is too narrow, the full joined slot text is usually too wide because it spans multiple visual lines). Setting an explicit width on the dropdown is a working escape hatch in the meantime.
Steps to Reproduce
- Render a filterable or non-filterable Dropdown with
GoabDropdownItem items that have rich slotted content (e.g. name + role + location on separate lines) and a short label
- Open the dropdown menu
- Observe that the menu width is calculated from the label length, not the rendered content
- Observe the slotted content's widest line clipping against the menu's right edge, with
overflow-x: auto rather than wrapping
Acceptance Criteria
Description
The Dropdown menu's auto-calculated width clips items with rich slotted content (see #1351).
getLongestChildWidthinDropdown.sveltesizes the menu fromoption.label || (option.hasSlotContent ? option.filter : "") || option.value, measured inch. A slotted item almost always has alabelset (it's shown in the input on selection), sooption.label ||short-circuits and the slot-text fallback never runs. The menu ends up sized to the label instead of the rendered content, and wider content clips because the menu'soverflow-xisautorather than wrapping.Measured example: an item with a 13-character label but a 22-character line of slotted content rendered at
liclientWidth 185px against scrollWidth 201px — a 16px clip.This also conflicts with the existing "don't truncate labels" guidance, which says longer text should wrap rather than clip.
A real fix likely needs to measure rendered content width after slot distribution rather than relying on a character-count proxy, since there's no single text value that represents multi-line rich content well (the label is too narrow, the full joined slot text is usually too wide because it spans multiple visual lines). Setting an explicit
widthon the dropdown is a working escape hatch in the meantime.Steps to Reproduce
GoabDropdownItemitems that have rich slotted content (e.g. name + role + location on separate lines) and a shortlabeloverflow-x: autorather than wrappingAcceptance Criteria