Rearranged token edit settings

src/components/token/TokenSettings.js

@@ -15,8 +15,31 @@ function TokenSettings({ token, onSettingsChange }) {
   const tokenEmpty = !token || isEmpty(token);
   return (
     <Flex sx={{ flexDirection: "column" }}>
-      <Flex>
       <Box mt={2} sx={{ flexGrow: 1 }}>
+        <Label htmlFor="name">Name</Label>
+        <Input
+          name="name"
+          value={(token && token.name) || ""}
+          onChange={(e) => onSettingsChange("name", e.target.value)}
+          disabled={tokenEmpty || token.type === "default"}
+          my={1}
+        />
+      </Box>
+      <Box mt={2}>
+        <Label mb={1}>Category</Label>
+        <Select
+          options={categorySettings}
+          value={
+            !tokenEmpty &&
+            categorySettings.find((s) => s.value === token.category)
+          }
+          isDisabled={tokenEmpty || token.type === "default"}
+          onChange={(option) => onSettingsChange("category", option.value)}
+          isSearchable={false}
+        />
+      </Box>
+      <Flex>
+        <Box my={2} sx={{ flexGrow: 1 }}>
           <Label htmlFor="tokenSize">Default Size</Label>
           <Input
             type="number"
@@ -31,29 +54,6 @@ function TokenSettings({ token, onSettingsChange }) {
           />
         </Box>
       </Flex>
-      <Box mt={2}>
-        <Label mb={1}>Category</Label>
-        <Select
-          options={categorySettings}
-          value={
-            !tokenEmpty &&
-            categorySettings.find((s) => s.value === token.category)
-          }
-          isDisabled={tokenEmpty || token.type === "default"}
-          onChange={(option) => onSettingsChange("category", option.value)}
-          isSearchable={false}
-        />
-      </Box>
-      <Box my={2} sx={{ flexGrow: 1 }}>
-        <Label htmlFor="name">Name</Label>
-        <Input
-          name="name"
-          value={(token && token.name) || ""}
-          onChange={(e) => onSettingsChange("name", e.target.value)}
-          disabled={tokenEmpty || token.type === "default"}
-          my={1}
-        />
-      </Box>
     </Flex>
   );
 }