fix(web-components): fluent-dropdown control overflows when white-space: nowrap is inherited

[Copilot]

In multiselect mode, a long display value combined with an inherited white-space: nowrap from the host environment causes the slotted <button> to expand beyond the control's bounds, pushing the chevron indicator out of view.

Root cause: ::slotted(:is(input, button)) used all: unset (which resets white-space to inherit) plus flex: 1 1 auto with no min-width constraint — so the button could never shrink below its content width in the flex container.

Changes

• dropdown.styles.ts — Added to ::slotted(:is(input, button)):
  • min-width: 0 — lets the flex item shrink below intrinsic content size
  • overflow: hidden + text-overflow: ellipsis — clips and truncates overflowing display value
  • white-space: nowrap — explicit override so the value never wraps regardless of inheritance

::slotted(:is(input, button)) {
  all: unset;
  flex: 1 1 auto;
  min-width: 0;           /* allow shrinking in flex context */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;    /* prevent inheritance of nowrap from breaking layout */
}

• dropdown.stories.ts — Added MultipleSelectionOverflow story: multiselect dropdown with several pre-selected options rendered inside a white-space: nowrap; width: 300px container, directly reproducing the reported scenario.

[chrisdholt]

This was fixed with a one-line change in #36210