admin: Fix selected value rendering underneath the end adornment in SelectField

[vps-manuel-blum]

Problem

SelectField / FinalFormSelect has the same class of problem as the multi-select AutocompleteField in #5434, in a milder form: the end adornment doesn't wrap (the theme already positions it absolutely), but the select reserves a fixed padding-right (42px via the inputAdornedEnd theme override) while the adornment width varies at runtime. As a result, long values render underneath the icons:

• with error icon + clear button, the text paints 12px under the error icon
• in the SelectField children path (options prop), the text paints 6px under the clear button

Solution

Same approach as #5434: the adornment container's position is measured (ResizeObserver) and the distance between the input's right edge and the adornment's left edge is reserved as padding-right on the select display, so the value text is always truncated (ellipsis) before the first adornment icon — regardless of which adornments (clear button, error icon) are currently visible.

Both render paths (children/options prop and options + getOptionLabel) now build the end adornment the same way. When no adornment is rendered, no padding is overridden and the theme default applies.

Example

New regression story components/form/SelectField/MultipleEndAdornment with 10 cases (long value, many values, required, empty, disabled, error + clear, single-select, children path) and a container-width control to test any width — same setup as the story in #5434, so it can be tested on the deploy preview.

Open TODOs/questions

• Unrelated pre-existing issue noticed while testing (not fixed here, one PR per change): the custom renderValue for multiple selects returns an array of labels, which React renders without separators ("ChocolateStrawberryVanilla"). Should be joined with ", " in a follow-up PR.

Further information

• Same fix pattern as admin: Fix end adornment wrapping below chips in multi-select AutocompleteField #5434 (multi-select AutocompleteField). Once both are merged, the measurement logic could be extracted into a shared internal hook in a follow-up.
• Verified with a Playwright geometry check at 240/320/505/700/1000px container widths: the text content box never extends under an icon, the menu still opens on click, and the clear button clears and then disappears.

---

Generated by Claude Code