Standardise settings select margins

src/components/Select.js

@@ -53,6 +53,10 @@ function Select({ creatable, ...props }) {
           color: theme.colors.text,
           opacity: state.isDisabled ? 0.5 : 1,
         }),
+        container: (provided) => ({
+          ...provided,
+          margin: "4px 0",
+        }),
       }}
       theme={(t) => ({
         ...t,

src/components/map/MapSettings.js

@@ -185,8 +185,8 @@ function MapSettings({
             sx={{ flexDirection: "column" }}
           >
             <Flex sx={{ alignItems: "flex-end" }}>
-              <Box mb={1} sx={{ width: "50%" }}>
-                <Label mb={1}>Grid Type</Label>
+              <Box sx={{ width: "50%" }}>
+                <Label>Grid Type</Label>
                 <Select
                   isDisabled={mapEmpty}
                   options={gridTypeSettings}
@@ -198,7 +198,7 @@ function MapSettings({
                   isSearchable={false}
                 />
               </Box>
-              <Flex sx={{ width: "50%", flexDirection: "column" }} ml={2}>
+              <Flex sx={{ flexGrow: 1, flexDirection: "column" }} ml={2}>
                 <Label>
                   <Checkbox
                     checked={!mapEmpty && map.showGrid}
@@ -223,7 +223,7 @@ function MapSettings({
             </Flex>
             <Flex sx={{ alignItems: "flex-end" }}>
               <Box my={2} sx={{ width: "50%" }}>
-                <Label mb={1}>Grid Measurement</Label>
+                <Label>Grid Measurement</Label>
                 <Select
                   isDisabled={mapEmpty}
                   options={
@@ -241,7 +241,7 @@ function MapSettings({
                   isSearchable={false}
                 />
               </Box>
-              <Box mb={1} mx={2} sx={{ flexGrow: 1 }}>
+              <Box m={2} mr={0} sx={{ flexGrow: 1 }}>
                 <Label htmlFor="gridMeasurementScale">Grid Scale</Label>
                 <Input
                   name="gridMeasurementScale"
@@ -258,7 +258,7 @@ function MapSettings({
           {!mapEmpty && map.type !== "default" && (
             <Flex my={2} sx={{ alignItems: "center" }}>
               <Box mb={1} sx={{ width: "50%" }}>
-                <Label mb={1}>Quality</Label>
+                <Label>Quality</Label>
                 <Select
                   options={qualitySettings}
                   value={

src/components/token/TokenSettings.js

@@ -26,7 +26,7 @@ function TokenSettings({ token, onSettingsChange }) {
         />
       </Box>
       <Box mt={2}>
-        <Label mb={1}>Default Category</Label>
+        <Label>Default Category</Label>
         <Select
           options={categorySettings}
           value={
@@ -40,22 +40,20 @@ function TokenSettings({ token, onSettingsChange }) {
           isSearchable={false}
         />
       </Box>
-      <Flex>
-        <Box mt={2} sx={{ flexGrow: 1 }}>
-          <Label htmlFor="tokenSize">Default Size</Label>
-          <Input
-            type="number"
-            name="tokenSize"
-            value={`${(token && token.defaultSize) || 0}`}
-            onChange={(e) =>
-              onSettingsChange("defaultSize", parseFloat(e.target.value))
-            }
-            disabled={tokenEmpty}
-            min={1}
-            my={1}
-          />
-        </Box>
-      </Flex>
+      <Box mt={2} sx={{ flexGrow: 1 }}>
+        <Label htmlFor="tokenSize">Default Size</Label>
+        <Input
+          type="number"
+          name="tokenSize"
+          value={`${(token && token.defaultSize) || 0}`}
+          onChange={(e) =>
+            onSettingsChange("defaultSize", parseFloat(e.target.value))
+          }
+          disabled={tokenEmpty}
+          min={1}
+          my={1}
+        />
+      </Box>
       <Box my={2} sx={{ flexGrow: 1 }}>
         <Label htmlFor="label">Default Label</Label>
         <Input