Fix forms

3 files changed, 27 insertions, 30 deletions

diff --git a/modern/src/settings/components/BaseCommandView.js b/modern/src/settings/components/BaseCommandView.js
index c578e111..ca81a854 100644
--- a/modern/src/settings/components/BaseCommandView.js
+++ b/modern/src/settings/components/BaseCommandView.js
@@ -25,7 +25,6 @@ const BaseCommandView = ({ item, setItem }) => {
   return (
     <>
       <SelectField
-        margin="normal"
         value={item.type || ''}
         onChange={(e) => setItem({ ...item, type: e.target.value, attributes: {} })}
         endpoint="/api/commands/types"
@@ -53,7 +52,6 @@ const BaseCommandView = ({ item, setItem }) => {
         }
         return (
           <TextField
-            margin="normal"
             type={type === 'number' ? 'number' : 'text'}
             value={item.attributes[key]}
             onChange={(e) => {
diff --git a/modern/src/settings/components/EditAttributesView.js b/modern/src/settings/components/EditAttributesView.js
index e6e1ddf0..14577e71 100644
--- a/modern/src/settings/components/EditAttributesView.js
+++ b/modern/src/settings/components/EditAttributesView.js
@@ -24,7 +24,6 @@ import {
 const useStyles = makeStyles((theme) => ({
   addButton: {
     marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(1),
   },
   removeButton: {
     marginRight: theme.spacing(1.5),
@@ -166,23 +165,24 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => {
                 )}
                 label={getAttributeName(key, subtype)}
               />
-              <IconButton className={classes.removeButton} onClick={() => deleteAttribute(key)}>
-                <CloseIcon />
+              <IconButton size="small" className={classes.removeButton} onClick={() => deleteAttribute(key)}>
+                <CloseIcon fontSize="small" />
               </IconButton>
             </Grid>
           );
         }
         return (
-          <FormControl margin="normal" key={key}>
+          <FormControl key={key}>
             <InputLabel>{getAttributeName(key, subtype)}</InputLabel>
             <OutlinedInput
+              label={getAttributeName(key, subtype)}
               type={type === 'number' ? 'number' : 'text'}
               value={getDisplayValue(value, subtype)}
               onChange={(e) => updateAttribute(key, e.target.value, type, subtype)}
               endAdornment={(
                 <InputAdornment position="end">
-                  <IconButton onClick={() => deleteAttribute(key)}>
-                    <CloseIcon />
+                  <IconButton size="small" onClick={() => deleteAttribute(key)}>
+                    <CloseIcon fontSize="small" />
                   </IconButton>
                 </InputAdornment>
               )}
diff --git a/modern/src/settings/components/EditItemView.js b/modern/src/settings/components/EditItemView.js
index 83624b8f..8dca1e66 100644
--- a/modern/src/settings/components/EditItemView.js
+++ b/modern/src/settings/components/EditItemView.js
@@ -3,7 +3,6 @@ import { useNavigate, useParams } from 'react-router-dom';
 import makeStyles from '@mui/styles/makeStyles';
 import Container from '@mui/material/Container';
 import Button from '@mui/material/Button';
-import FormControl from '@mui/material/FormControl';
 
 import { useCatch, useEffectAsync } from '../../reactHelper';
 import { useTranslation } from '../../common/components/LocalizationProvider';
@@ -14,6 +13,8 @@ const useStyles = makeStyles((theme) => ({
     marginTop: theme.spacing(2),
   },
   buttons: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
     display: 'flex',
     justifyContent: 'space-evenly',
     '& > *': {
@@ -70,27 +71,25 @@ const EditItemView = ({
     <PageLayout menu={menu} breadcrumbs={breadcrumbs}>
       <Container maxWidth="xs" className={classes.container}>
         {children}
-        <FormControl fullWidth margin="normal">
-          <div className={classes.buttons}>
-            <Button
-              type="button"
-              color="primary"
-              variant="outlined"
-              onClick={() => navigate(-1)}
-            >
-              {t('sharedCancel')}
-            </Button>
-            <Button
-              type="button"
-              color="primary"
-              variant="contained"
-              onClick={handleSave}
-              disabled={!validate()}
-            >
-              {t('sharedSave')}
-            </Button>
-          </div>
-        </FormControl>
+        <div className={classes.buttons}>
+          <Button
+            type="button"
+            color="primary"
+            variant="outlined"
+            onClick={() => navigate(-1)}
+          >
+            {t('sharedCancel')}
+          </Button>
+          <Button
+            type="button"
+            color="primary"
+            variant="contained"
+            onClick={handleSave}
+            disabled={!validate()}
+          >
+            {t('sharedSave')}
+          </Button>
+        </div>
       </Container>
     </PageLayout>
   );