Fix attributes editing

2 files changed, 21 insertions, 11 deletions

diff --git a/modern/src/settings/components/AddAttributeDialog.js b/modern/src/settings/components/AddAttributeDialog.js
index de5d22b7..86ff64ea 100644
--- a/modern/src/settings/components/AddAttributeDialog.js
+++ b/modern/src/settings/components/AddAttributeDialog.js
@@ -1,13 +1,24 @@
 import React, { useState } from 'react';
 import {
-  Button, Dialog, DialogActions, DialogContent, FormControl, InputLabel, MenuItem, Select, TextField,
-  Autocomplete,
+  Button, Dialog, DialogActions, DialogContent, FormControl, InputLabel, MenuItem, Select, TextField, Autocomplete,
 } from '@mui/material';
 
 import { createFilterOptions } from '@mui/material/useAutocomplete';
+import { makeStyles } from '@mui/styles';
 import { useTranslation } from '../../common/components/LocalizationProvider';
 
+const useStyles = makeStyles((theme) => ({
+  details: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2),
+    paddingBottom: theme.spacing(1),
+    paddingTop: theme.spacing(3),
+  },
+}));
+
 const AddAttributeDialog = ({ open, onResult, definitions }) => {
+  const classes = useStyles();
   const t = useTranslation();
 
   const filter = createFilterOptions({
@@ -25,7 +36,7 @@ const AddAttributeDialog = ({ open, onResult, definitions }) => {
 
   return (
     <Dialog open={open} fullWidth maxWidth="xs">
-      <DialogContent>
+      <DialogContent className={classes.details}>
         <Autocomplete
           onChange={(_, option) => {
             setKey(option && typeof option === 'object' ? option.key : option);
@@ -45,14 +56,17 @@ const AddAttributeDialog = ({ open, onResult, definitions }) => {
           }}
           options={options}
           getOptionLabel={(option) => (option && typeof option === 'object' ? option.name : option)}
-          renderOption={(option) => option.name}
-          freeSolo
+          renderOption={(props, option) => (
+            <li {...props}>
+              {option.name}
+            </li>
+          )}
           renderInput={(params) => (
-            <TextField {...params} label={t('sharedAttribute')} margin="normal" />
+            <TextField {...params} label={t('sharedAttribute')} />
           )}
+          freeSolo
         />
         <FormControl
-          margin="normal"
           fullWidth
           disabled={key in definitions}
         >
diff --git a/modern/src/settings/components/EditAttributesView.js b/modern/src/settings/components/EditAttributesView.js
index 14577e71..6b7ab5ac 100644
--- a/modern/src/settings/components/EditAttributesView.js
+++ b/modern/src/settings/components/EditAttributesView.js
@@ -22,9 +22,6 @@ import {
 } from '../../common/util/converter';
 
 const useStyles = makeStyles((theme) => ({
-  addButton: {
-    marginTop: theme.spacing(2),
-  },
   removeButton: {
     marginRight: theme.spacing(1.5),
   },
@@ -195,7 +192,6 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => {
         color="primary"
         onClick={() => setAddDialogShown(true)}
         startIcon={<AddIcon />}
-        className={classes.addButton}
       >
         {t('sharedAdd')}
       </Button>