Merge branch 'vue3-again' into shigusegubu-vue3

* vue3-again:
  get rid of portal-vue
  port !1488 to vue3
  Remove debugging code
  Fix overlapping buttons in Theme settings
  Update dependency ruffle-mirror to v2021.12.31
  Update dependency babel-loader to v8.2.4

src/components/settings_modal/settings_modal.scss

@@ -54,5 +54,10 @@
     >* {
       margin-right: 0.5em;
     }
+
+    .extra-content {
+      display: flex;
+      flex-grow: 1;
+    }
   }
 }

src/components/settings_modal/settings_modal.vue

@@ -113,6 +113,10 @@
         <Checkbox :modelValue="!!expertLevel" @update:modelValue="expertLevel = Number($event)">
           {{ $t("settings.expert_mode") }}
         </Checkbox>
+        <span
+          class="extra-content"
+          id="unscrolled-content"
+        />
       </div>
     </div>
   </Modal>

src/components/settings_modal/tabs/theme_tab/theme_tab.js

@@ -377,6 +377,10 @@ export default {
         // To separate from other random JSON files and possible future source formats
         _pleroma_theme_version: 2, theme, source
       }
+    },
+    isActive () {
+      const tabSwitcher = this.$parent
+      return tabSwitcher ? tabSwitcher.isActive('theme') : false
     }
   },
   components: {

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

@@ -268,13 +268,6 @@
     }
   }
 
-  .apply-container {
-    justify-content: center;
-    position: absolute;
-    bottom: 8px;
-    right: 5px;
-  }
-
   .radius-item,
   .color-item {
     min-width: 20em;
@@ -334,16 +327,25 @@
     padding: 20px;
   }
 
-  .apply-container {
-    .btn {
-      min-height: 28px;
-      min-width: 10em;
-      padding: 0 2em;
-    }
-  }
-
   .btn {
     margin-left: .25em;
     margin-right: .25em;
   }
 }
+
+.extra-content {
+  .apply-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    flex-grow: 1;
+
+    .btn {
+      flex-grow: 1;
+      min-height: 28px;
+      min-width: 0;
+      max-width: 10em;
+      padding: 0;
+    }
+  }
+}

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

@@ -1018,21 +1018,26 @@
       </tab-switcher>
     </keep-alive>
 
-    <div class="apply-container">
-      <button
-        class="btn button-default submit"
-        :disabled="!themeValid"
-        @click="setCustomTheme"
-      >
-        {{ $t('general.apply') }}
-      </button>
-      <button
-        class="btn button-default"
-        @click="clearAll"
-      >
-        {{ $t('settings.style.switcher.reset') }}
-      </button>
-    </div>
+    <teleport
+      v-if="isActive"
+      to="#unscrolled-content"
+    >
+      <div class="apply-container">
+        <button
+          class="btn button-default submit"
+          :disabled="!themeValid"
+          @click="setCustomTheme"
+        >
+          {{ $t('general.apply') }}
+        </button>
+        <button
+          class="btn button-default"
+          @click="clearAll"
+        >
+          {{ $t('settings.style.switcher.reset') }}
+        </button>
+      </div>
+    </teleport>
   </div>
 </template>
 

src/components/tab_switcher/tab_switcher.jsx

@@ -50,11 +50,20 @@ export default {
     activeIndex () {
       // In case of controlled component
       if (this.activeTab) {
-        return this.slots().findIndex(slot => this.activeTab === slot.key)
+        return this.slots().findIndex(slot => this.activeTab === slot.props.key)
       } else {
         return this.active
       }
     },
+    isActive () {
+      return tabName => {
+        const isWanted = slot => slot.props && slot.props['data-tab-name'] === tabName
+        return this.$slots.default().findIndex(isWanted) === this.activeIndex
+      }
+    },
+    settingsModalVisible () {
+      return this.settingsModalState === 'visible'
+    },
     ...mapState({
       settingsModalState: state => state.interface.settingsModalState
     })