finished the mobile view for the field page and some minor functionality changes

src/field/FieldSettings.tsx

@@ -152,9 +152,7 @@ export default function FieldSettings(props: Props) {
 
   const fieldInformation = () => {
     return (
-      <Box>
-        <Box>
-          <DialogTitle>Field Information</DialogTitle>
+      <React.Fragment>
           <TextField
             value={fieldName}
             margin="normal"
@@ -258,7 +256,14 @@ export default function FieldSettings(props: Props) {
             Field Colour
             <ColourPicker onChange={color => setFeatColor(color)} />
           </Box>
-        </Box>
+          </React.Fragment>
+    );
+  };
+
+  return (
+    <ResponsiveDialog fullWidth open={props.open} onClose={onClose}>
+      <DialogTitle>Field Information</DialogTitle>
+      <DialogContent>{fieldInformation()}</DialogContent>
         <DialogActions>
           <Grid container direction="row">
             <Grid>
@@ -282,13 +287,6 @@ export default function FieldSettings(props: Props) {
             </Grid>
           </Grid>
         </DialogActions>
-      </Box>
-    );
-  };
-
-  return (
-    <ResponsiveDialog fullWidth fullScreen={false} open={props.open} onClose={onClose}>
-      <DialogContent>{fieldInformation()}</DialogContent>
     </ResponsiveDialog>
   );
 }