1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00

1-3744: Set a min-width for context field selector + underline when not focused (#9991)

When you have very short names (1--2 characters) the field itself can be
hard to see, so we'll set a min width.

Before (with hover): 
<img width="455" alt="image"
src="https://github.com/user-attachments/assets/a9590d3d-88a2-4814-9581-33b8378f4524"
/>

After (without hover):
<img width="523" alt="image"
src="https://github.com/user-attachments/assets/1e7b6028-e142-442a-9b53-55425d2d6c59"
/>
This commit is contained in:
Thomas Heartman 2025-05-14 13:56:05 +02:00 committed by GitHub
parent 23d55340f2
commit 26a1156959
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -75,6 +75,7 @@ const LegalValuesContainer = styled('div')(({ theme }) => ({
const StyledSelect = styled(GeneralSelect)(({ theme }) => ({
fieldset: { border: 'none', borderRadius: 0 },
maxWidth: '25ch',
minWidth: '7ch',
':focus-within .MuiSelect-select': {
background: 'none',
},
@ -84,9 +85,7 @@ const StyledSelect = styled(GeneralSelect)(({ theme }) => ({
margin: 0,
},
'&::before': {
border: 'none',
// make it transparent so that it fades in
borderColor: `${theme.palette.primary.main}00`,
borderColor: theme.palette.divider,
},
'&&:hover::before': {
borderColor: theme.palette.primary.main,