Adjust variable editor layout

This commit is contained in:
2025-10-03 15:04:35 -06:00
parent b3c68932b0
commit 2cbe82e498

View File

@@ -902,8 +902,15 @@ export default function AssemblyEditor({
key={variable.id} key={variable.id}
sx={{ p: 2, bgcolor: BACKGROUND_COLORS.field, border: "1px solid #2b3544", borderRadius: 1 }} sx={{ p: 2, bgcolor: BACKGROUND_COLORS.field, border: "1px solid #2b3544", borderRadius: 1 }}
> >
<Grid container spacing={2} alignItems="center"> <Box
<Grid item xs={12} md={3}> sx={{
display: "flex",
flexWrap: "wrap",
alignItems: "center",
gap: 2
}}
>
<Box sx={{ flex: { xs: "1 1 100%", md: "0 1 23%" } }}>
<TextField <TextField
label="Variable Name" label="Variable Name"
value={variable.name} value={variable.name}
@@ -912,8 +919,8 @@ export default function AssemblyEditor({
variant="outlined" variant="outlined"
sx={INPUT_BASE_SX} sx={INPUT_BASE_SX}
/> />
</Grid> </Box>
<Grid item xs={12} md={3}> <Box sx={{ flex: { xs: "1 1 100%", md: "0 1 18%" } }}>
<TextField <TextField
label="Display Label" label="Display Label"
value={variable.label} value={variable.label}
@@ -922,8 +929,8 @@ export default function AssemblyEditor({
variant="outlined" variant="outlined"
sx={INPUT_BASE_SX} sx={INPUT_BASE_SX}
/> />
</Grid> </Box>
<Grid item xs={12} md={2}> <Box sx={{ flex: { xs: "1 1 100%", md: "0 1 18%" } }}>
<TextField <TextField
select select
fullWidth fullWidth
@@ -937,8 +944,14 @@ export default function AssemblyEditor({
<MenuItem key={opt.key} value={opt.key}>{opt.label}</MenuItem> <MenuItem key={opt.key} value={opt.key}>{opt.label}</MenuItem>
))} ))}
</TextField> </TextField>
</Grid> </Box>
<Grid item xs={12} md={3}> <Box
sx={{
flex: { xs: "1 1 100%", md: "0 1 27%" },
display: "flex",
alignItems: "center"
}}
>
{variable.type === "boolean" ? ( {variable.type === "boolean" ? (
<FormControlLabel <FormControlLabel
control={ control={
@@ -949,6 +962,11 @@ export default function AssemblyEditor({
/> />
} }
label="Default Value" label="Default Value"
sx={{
color: "#9ba3b4",
m: 0,
"& .MuiFormControlLabel-label": { fontSize: "0.95rem" }
}}
/> />
) : ( ) : (
<TextField <TextField
@@ -960,8 +978,15 @@ export default function AssemblyEditor({
sx={INPUT_BASE_SX} sx={INPUT_BASE_SX}
/> />
)} )}
</Grid> </Box>
<Grid item xs={12} md={1} sx={{ display: "flex", justifyContent: "center" }}> <Box
sx={{
flex: { xs: "1 1 100%", md: "0 0 6%" },
display: "flex",
justifyContent: "center",
alignItems: "center"
}}
>
<Tooltip title="Required"> <Tooltip title="Required">
<Checkbox <Checkbox
checked={Boolean(variable.required)} checked={Boolean(variable.required)}
@@ -969,25 +994,23 @@ export default function AssemblyEditor({
sx={{ color: "#58a6ff" }} sx={{ color: "#58a6ff" }}
/> />
</Tooltip> </Tooltip>
</Grid> </Box>
<Grid item xs={12}> <Box sx={{ flex: { xs: "1 1 100%", md: "1 1 0%" }, minWidth: { md: 120 } }}>
<TextField <TextField
label="Description" label="Description"
value={variable.description} value={variable.description}
onChange={(e) => updateVariable(variable.id, { description: e.target.value })} onChange={(e) => updateVariable(variable.id, { description: e.target.value })}
fullWidth fullWidth
multiline
minRows={2}
variant="outlined" variant="outlined"
sx={INPUT_BASE_SX} sx={INPUT_BASE_SX}
/> />
</Grid> </Box>
<Grid item xs={12} sx={{ display: "flex", justifyContent: "flex-end" }}> <Box sx={{ flex: "1 1 100%", display: "flex", justifyContent: "flex-end" }}>
<IconButton onClick={() => removeVariable(variable.id)} sx={{ color: "#ff6b6b" }}> <IconButton onClick={() => removeVariable(variable.id)} sx={{ color: "#ff6b6b" }}>
<DeleteIcon /> <DeleteIcon />
</IconButton> </IconButton>
</Grid> </Box>
</Grid> </Box>
</Paper> </Paper>
))} ))}
</Box> </Box>