Move theme apply/reset to new row

Fixes #225

src/components/settings_modal/settings_modal.scss

@@ -76,6 +76,10 @@
       position: absolute;
       right: 20px;
       padding-right: 10px;
+
+      @media all and (max-width: 800px) {
+        display: none;
+      }
     }
   }
 }

src/components/settings_modal/settings_modal.vue

@@ -44,6 +44,10 @@
       <div class="panel-body">
         <SettingsModalContent v-if="modalOpenedOnce" />
       </div>
+      <span
+        id="unscrolled-content"
+        class="extra-content"
+      />
       <div class="panel-footer settings-footer">
         <Popover
           class="export"
@@ -53,7 +57,7 @@
           :bound-to="{ x: 'container' }"
           remove-padding
         >
-          <template v-slot:trigger>
+          <template #trigger>
             <button
               class="btn button-default"
               :title="$t('general.close')"
@@ -65,7 +69,7 @@
               />
             </button>
           </template>
-          <template v-slot:content="{close}">
+          <template #content="{close}">
             <div class="dropdown-menu">
               <button
                 class="button-default dropdown-item dropdown-item-icon"
@@ -103,14 +107,11 @@
 
         <Checkbox
           :model-value="!!expertLevel"
+          class="expertMode"
           @update:modelValue="expertLevel = Number($event)"
         >
           {{ $t("settings.expert_mode") }}
         </Checkbox>
-        <span
-          id="unscrolled-content"
-          class="extra-content"
-        />
         <button
           v-if="currentUser"
           class="button-default logout-button"

src/components/settings_modal/tabs/theme_tab/theme_tab.scss

@@ -284,7 +284,6 @@
     box-shadow: none;
     background: transparent;
     color: var(--faint, $fallback--faint);
-    align-self: stretch;
   }
 
   .theme-color-cl,
@@ -318,11 +317,11 @@
 
 .extra-content {
   .apply-container {
+    padding-left: 15vw;
     display: flex;
     flex-direction: row;
-    justify-content: space-around;
+    justify-content: space-evenly;
     flex-grow: 1;
-
     .btn {
       flex-grow: 1;
       min-height: 2em;

src/components/settings_modal/tabs/theme_tab/theme_tab.vue

@@ -958,20 +958,22 @@
       v-if="isActive"
       to="#unscrolled-content"
     >
-      <div class="apply-container">
+      <div class="panel-body settings-footer">
-        <button
+        <div class="apply-container">
-          class="btn button-default submit"
+          <button
-          :disabled="!themeValid"
+            class="btn button-default submit"
-          @click="setCustomTheme"
+            :disabled="!themeValid"
-        >
+            @click="setCustomTheme"
-          {{ $t('general.apply') }}
+          >
-        </button>
+            {{ $t('general.apply') }}
-        <button
+          </button>
-          class="btn button-default"
+          <button
-          @click="clearAll"
+            class="btn button-default"
-        >
+            @click="clearAll"
-          {{ $t('settings.style.switcher.reset') }}
+          >
-        </button>
+            {{ $t('settings.style.switcher.reset') }}
+          </button>
+        </div>
       </div>
     </teleport>
   </div>