Material UI Autocomplete margin sizing issue - css

Question

I have the following issue. I'm using Material-UI Autocomplete in my project. I made some alterations so the font and the component resize when the viewport changes size. Thus I've used vw on widths,heights and font-sizes. However, as you can see in the gif bellow, when I resize the gap between the green sauce and the blue/red spaces increases. how can I make sure that the gap also follows the initial proportion? So basically what I would like is that the whole component shrunk and the gap didn't increase. I've been altering all kinds of heights/margins but I can't seem to solve the issue. You have all the code available on the following sand box.
https://2y3jh.csb.app

Answer 1

You need to alter the input height to 3vw so that the height is consistent.
import TextField from "#material-ui/core/TextField";
import Autocomplete from "#material-ui/lab/Autocomplete";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles({
input: {
width: "100%",
height: "3vw", // Changed from 2vw
fontSize: "1.25vw",
color: "#02112E",
backgroundColor: "green"
},
option: {
fontSize: "0.8vw",
height: "3vw",
width: "100%",
color: "#02112E"
},
noOption: {
fontSize: "0.8vw",
height: "3vw",
width: "100%",
color: "#02112E"
},
root: {
"& label + .MuiInput-formControl": {
marginTop: "1vw"
},
"& label.Mui-focused": {
color: "#02112E",
fontSize: "0.97vw"
},
"& .MuiInput-underline:after": {
borderBottomColor: "#02112E",
borderBottomWidth: "0.21vw",
left: "0",
transformOrigin: "left center",
transition: "all 0.3s ease"
},
"& .MuiInput-underline:before": {
borderBottomColor: "#02112E",
borderBottomWidth: "0.07vw"
},
"& .MuiInput-underline:hover::before": {
borderBottomColor: "#02112E",
borderBottomWidth: "0.07vw"
},
fontSize: "1.25vw",
width: "100%",
height: "3vw",
backgroundColor: "red"
},
inputRoot: {
color: "#02112E",
fontSize: "1.25vw",
backgroundColor: "blue",
transform: "translate(0, 2vw) scale(1)"
}
});
export default function StyledAutoComplete() {
const classes = useStyles();
return (
<Autocomplete
style={{ width: "60%" }}
options={list}
classes={{
root: classes.root,
option: classes.option,
noOptions: classes.noOption,
input: classes.input
}}
disableClearable
freeSolo
noOptionsText={"No Options"}
autoHighlight
getOptionLabel={(option) => option.title}
renderOption={(option) => <React.Fragment>{option.title}</React.Fragment>}
renderInput={(params) => (
<TextField
style={{ width: "100%" }}
{...params}
label="Option"
variant="standard"
inputProps={{
...params.inputProps,
autoComplete: "new-password" // disable autocomplete and autofill
}}
InputLabelProps={{
classes: {
root: classes.inputRoot
}
}}
/>
)}
/>
);
}
const list = [{ title: "opt 1" }, { title: "opt 2" }];
Demo: https://2zh36.csb.app/
Output: