minor style changes

docs/.vuepress/components/Generator.vue

@@ -14,7 +14,10 @@
       </div>
       <div>
         <span>Use Stage Loader:</span>
-        <SelectComponent :options="useStageLoaderOptions" :onChange="onStageLoaderChanged" />
+        <SelectComponent
+          :options="useStageLoaderOptions"
+          :onChange="onStageLoaderChanged"
+        />
       </div>
       <div>
         <span>Download:</span>
@@ -34,7 +37,10 @@
           :onInspect="inspect"
         />
       </div>
-      <div v-if="codes && codes.length > 0 && useStageLoader">
+      <div
+        class="prevent-shrink"
+        v-if="codes && codes.length > 0 && useStageLoader"
+      >
         <h3>Stage Loader</h3>
         <StageLoader :fastCodes="stageLoaderCodes" />
       </div>
@@ -51,14 +57,10 @@
             This is a cheatfile generator for Super Mario Sunshine speedrun
             practice. If this is your first time using the generator we highly
             recommend to check out the
-            <a
-              href="/guide.html"
-              target="_blank"
-            >guide</a> first. Visit the
-            <a
-              href="/guide.html#troubleshooting"
-              target="_blank"
-            >the troubleshooting section</a>
+            <a href="/guide.html" target="_blank">guide</a> first. Visit the
+            <a href="/guide.html#troubleshooting" target="_blank"
+              >the troubleshooting section</a
+            >
             if you encounter any issues.
           </p>
           <div>
@@ -66,42 +68,41 @@
             <ul>
               <li>
                 Discord:
-                <a
-                  href="https://discord.gg/9dGJWEc"
-                  target="_blank"
-                >https://discord.gg/9dGJWEc</a>
+                <a href="https://discord.gg/9dGJWEc" target="_blank"
+                  >https://discord.gg/9dGJWEc</a
+                >
               </li>
               <li>
                 Speedrun.com:
-                <a
-                  href="https://speedrun.com/sms"
-                  target="_blank"
-                >https://speedrun.com/sms</a>
+                <a href="https://speedrun.com/sms" target="_blank"
+                  >https://speedrun.com/sms</a
+                >
               </li>
               <li>
                 Twitter:
-                <a
-                  href="https://twitter.com/SMSCommunity"
-                  target="_blank"
-                >https://twitter.com/SMSCommunity</a>
+                <a href="https://twitter.com/SMSCommunity" target="_blank"
+                  >https://twitter.com/SMSCommunity</a
+                >
               </li>
               <li>
                 Twitch:
                 <a
                   href="https://www.twitch.tv/SunshineCommunity"
                   target="_blank"
-                >https://www.twitch.tv/SunshineCommunity</a>
+                  >https://www.twitch.tv/SunshineCommunity</a
+                >
               </li>
             </ul>
           </div>
           <div>
             <p>
               The generator is brought to you by
-              <a
-                href="https://twitter.com/psychonauter"
-                target="_blank"
-              >Psychonauter</a>,
-              <a href="https://twitter.com/Qbe_Root" target="_blank">Noki Doki</a>
+              <a href="https://twitter.com/psychonauter" target="_blank"
+                >Psychonauter</a
+              >,
+              <a href="https://twitter.com/Qbe_Root" target="_blank"
+                >Noki Doki</a
+              >
               and
               <a href="https://twitter.com/srlMilk" target="_blank">Milk</a>.
             </p>
@@ -134,17 +135,17 @@ import axios from "axios";
 export default {
   mounted() {
     Promise.all(
-      gameVersions.map(async v => ({
+      gameVersions.map(async (v) => ({
         identifier: v.identifier,
         cheats: parseXml((await axios.get(`/codes/${v.identifier}.xml`)).data),
-        fastCodes: (await axios.get(`/codes/fast/${v.identifier}.json`)).data
+        fastCodes: (await axios.get(`/codes/fast/${v.identifier}.json`)).data,
       }))
     )
-      .then(codes => {
+      .then((codes) => {
         localStorage.setItem("codes", JSON.stringify(codes));
         this.isLoading = false;
       })
-      .catch(err => {
+      .catch((err) => {
         if (localStorage.getItem("codes") != null) this.isLoading = false;
       });
   },
@@ -161,8 +162,8 @@ export default {
       stageLoaderCodes: [],
       useStageLoaderOptions: [
         { value: false, label: "No" },
-        { value: true, label: "Yes" }
-      ]
+        { value: true, label: "Yes" },
+      ],
     };
   },
   methods: {
@@ -170,9 +171,9 @@ export default {
       this.selectedVersion = e;
       this.selectedCheats = [];
       const storedCodes = JSON.parse(localStorage.getItem("codes"));
-      this.codes = storedCodes.find(c => c.identifier === e).cheats;
+      this.codes = storedCodes.find((c) => c.identifier === e).cheats;
       this.stageLoaderCodes = storedCodes.find(
-        c => c.identifier === e
+        (c) => c.identifier === e
       ).fastCodes;
       this.inspectingCode = null;
     },
@@ -187,8 +188,8 @@ export default {
     },
     inspect(code) {
       this.inspectingCode = code;
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped>
@@ -197,6 +198,10 @@ section {
   flex-wrap: nowrap;
 }
 
+.prevent-shrink {
+  flex-shrink: 0;
+}
+
 section > div {
   display: inline-block;
   vertical-align: top;

docs/.vuepress/components/GroupSelectComponent.vue

@@ -44,6 +44,7 @@ export default {
   display: inline-block;
   max-width: 400px;
   min-width: 180px;
+  width: 100%;
   margin: 0 auto;
   background-color: #3eaf7c;
   z-index: 10;

docs/.vuepress/components/SelectComponent.vue

@@ -34,6 +34,7 @@ export default {
   display: inline-block;
   max-width: 400px;
   min-width: 180px;
+  width: 100%;
   margin: 0 auto;
   background-color: #3eaf7c;
   z-index: 10;

docs/.vuepress/components/StageLoader.vue

@@ -51,6 +51,10 @@
             ×
           </button>
         </li>
+      </ul>
+    </div>
+    <div class="config">
+      <div class="sub">
         <GroupSelectComponent
           placeholder="Choose a level.."
           :optGroups="stageLoaderLevelOptions"
@@ -58,19 +62,19 @@
           selectedValue="placeholder"
           :key="generation"
         />
-      </ul>
-    </div>
-    <div class="config">
-      <ButtonComponent label="Clear List" :onClick="onClearList" />
-    </div>
-    <div>
-      <GroupSelectComponent
-        placeholder="Load a preset.."
-        :optGroups="stageLoaderPresetOptions"
-        :onChange="onStageLoaderPresetSelected"
-        selectedValue="placeholder"
-        :key="generation"
-      />
+      </div>
+      <div class="sub">
+        <ButtonComponent label="Clear List" :onClick="onClearList" />
+      </div>
+      <div class="sub">
+        <GroupSelectComponent
+          placeholder="Load a preset.."
+          :optGroups="stageLoaderPresetOptions"
+          :onChange="onStageLoaderPresetSelected"
+          selectedValue="placeholder"
+          :key="generation + 1"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -189,7 +193,7 @@ export default {
 <style scoped>
 .config span {
   display: block;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
   padding-left: 2px;
 }
 
@@ -215,6 +219,10 @@ ul li {
   margin-right: 5px;
 }
 
+.sub {
+  margin-bottom: 15px;
+}
+
 .route-remove {
   margin-left: 3px;
   background: transparent;