Visual fixes

layouts/default.vue

@@ -17,14 +17,17 @@
             <NuxtLink to="/mods" class="tab">
               <span>Mods</span>
             </NuxtLink>
+            <client-only>
               <div v-if="this.$auth.loggedIn" class="section">
                 <NuxtLink to="/dashboard/projects" class="tab">
                   <span>Dashboard</span>
                 </NuxtLink>
               </div>
+            </client-only>
           </div>
         </section>
         <section class="column-grow">
+          <client-only>
             <template v-if="this.$auth.loggedIn">
               <section class="user-controls">
                 <div
@@ -88,6 +91,7 @@
                 >
               </section>
             </template>
+          </client-only>
         </section>
       </section>
     </header>

pages/dashboard/settings.vue

@@ -93,12 +93,9 @@
           will be removed from our servers. This cannot be reversed, so be
           careful!</span
         >
-        <input
+        <div type="button" class="button" @click="deleteAccount">
-          type="button"
+          Delete Account
-          class="button"
+        </div>
-          value="Delete Account"
-          @click="deleteAccount"
-        />
       </label>
     </section>
   </DashboardPage>
@@ -257,5 +254,15 @@ label {
   input[type='button']:hover {
     cursor: pointer;
   }
+
+  div,
+  a {
+    text-align: center;
+    height: fit-content;
+    flex: 1;
+  }
+  div:hover {
+    cursor: pointer;
+  }
 }
 </style>

pages/mod/_id/versions.vue

@@ -68,9 +68,11 @@
         </tr>
       </tbody>
     </table>
+    <div class="new-version">
       <nuxt-link v-if="currentMember" to="newversion" class="button">
         New Version
       </nuxt-link>
+    </div>
   </ModPage>
 </template>
 <script>
@@ -294,8 +296,10 @@ table {
   }
 }
 
-.button {
+.new-version {
-  float: right;
+  width: 100%;
+  text-align: right;
+  margin-bottom: var(--spacing-card-md);
 }
 
 @media screen and (max-width: 400px) {