[text field] Outlined input label is one pixel off

[MonstraG]

Steps to reproduce

Here are 4 focused inputs:

1. Outlined input as seen on https://mui.com/material-ui/react-text-field/

This input's styles have

transform: translate(14px, -9px) scale(0.75);

by default.

2. Same input, but I've set

transform: translate(15px, -9px) scale(0.75);

Just comparing input 1 and input 2, to my eye, the "margin" where there is no border looks more even in the version 2 than in the version 1. But, we can check that if we see where the "margin" comes from

3. Input 1, but with fieldset set to visibility: visible and label inside to opacity: 1, the white text is the aria label that also serves, thanks to it's padding, to create this "magin" in the border.

4. Input 2, but with fieldset visible.

It is quite clear in inputs 3 and 4 that the label is misaligned to the fieldset. The version in 4th is still not quite 100% there, but it's much less than a pixel off, so I'm not sure what can be done about it.

In order to fix the mismatch either the fieldset invisible version must be moved, or the visible version must be moved.

If the transtion is to be changed, here it is:
(but don't forget about the non-focused versions)

material-ui/packages/mui-material/src/InputLabel/InputLabel.js

Line 169 in 412dcbf

transform: 'translate(14px, -9px) scale(0.75)',

Another option is to change the NotchedOutline here:

material-ui/packages/mui-material/src/OutlinedInput/NotchedOutline.js

Line 16 in 412dcbf

padding: '0 8px',

from padding: 0 8px to padding: 0 7px, because 1px of horizontal size is provided by the border anyway. I think this is actually the most correct change.

Search keywords: Outlined input label misaligned

[oliviertassinari]

This reminds me a bit of #36288