[Select] Fix endAdornment overlapping the open indicator

[siriwatknp]

closes #45270

This PR is safe, no CSS specificity change due to CSS variable hoisting.

Before: https://stackblitz.com/edit/react-v5frgvqx?file=Demo.tsx

After:

Problem

Select and <TextField select> don't work well with an end adornment. The adornment is laid out on top of the dropdown chevron and shrinks the trigger, so clicking the open/close indicator (or the area under the adornment) doesn't open the menu.

Fix

• Take a present endAdornment out of the flex flow so the select fills the full width and the whole field opens the menu.
• Keep the chevron at the far right and place the adornment just to its left, reserving trailing space so the value clears both.
• Stop the outlined/filled input root from adding its own end-adornment padding when used as a Select, so the trailing space is owned in one place and stays consistent across variants.

Only selects that actually have an endAdornment are affected; other inputs are unchanged.

Out of scope

Clicking on the adornment does not open the popup.

Demo & test

• Added Select (with an endAdornment) and NativeSelect (with a startAdornment) to the Input Adornments demo across the outlined, filled, and standard variants.
• Added a visual regression fixture covering the variants plus a start+end case — the adornment sits left of the chevron with no overlap, the value clears it, and it stays vertically centered.

[code-infra-dashboard]

Deploy preview

https://deploy-preview-48723--material-ui.netlify.app/

Bundle size

Bundle	Parsed size	Gzip size
@mui/material	🔺+795B(+0.15%)	🔺+181B(+0.12%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/private-theming	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

---

Check out the code infra dashboard for more information about this PR.

[siriwatknp]

The reason to do this is to remove the padding-right for Select (padding-right appears when adornment exists).
Without this change, clicking on the right (showing text cursor) won't work because it's clicking on the root element.

[silviuaavram]

• These elements are quite crowded. The end adornment padding for Select, as seen in second screenshot, is almost hitting the chevron.
• There's no space between chevron and adornment, in the TextField case.
• The adornment coming after the chevron in TextField vs before in the Select seems weird. Why not consistent?

[mj12albert]

The fixture could follow the SelectOverflow fixture have a long value + small fixed width to test any clipping/overlap on the right side

[siriwatknp]

• The adornment coming after the chevron in TextField vs before in the Select seems weird. Why not consistent?

Let me try another approach, what I did was making end adornment on Select absolute to remove the padding on the InputBase-root (Select-root) because the padding prevent clicking the edge from opening the popup.

I am trying another approach to make clicking on the Select-root to also opens the popup, if it works well the CSS for adornment will be simpler and consistent with TextField.

[siriwatknp]

• These elements are quite crowded. The end adornment padding for Select, as seen in second screenshot, is almost hitting the chevron.
• There's no space between chevron and adornment, in the TextField case.
• The adornment coming after the chevron in TextField vs before in the Select seems weird. Why not consistent?

To make them consistent, clicking the Select root must also open the select popup, I tried but it's very fragile does not work well with native select. This makes me realize why this issue is not fixed a long time ago because the behavior differences force the CSS implementation to be different. I think it's better to fix the CSS (the initial approach I took) instead.

Meaning, the end adornment of TextField (input) and Select will have different position. On Select, it's absolute so that the select can be fullwidth.