Fix settings layout issues after the Vue 3 migration

src/renderer/components/DataSettings/DataSettings.css

@@ -0,0 +1,3 @@
+.box {
+  justify-content: center;
+}

src/renderer/components/DataSettings.vue → src/renderer/components/DataSettings/DataSettings.vue

@@ -5,7 +5,7 @@
     <h4 class="groupTitle">
       {{ $t('Subscriptions.Subscriptions') }}
     </h4>
-    <FtFlexBox class="dataSettingsBox">
+    <FtFlexBox class="box">
       <FtButton
         :label="$t('Settings.Data Settings.Import Subscriptions')"
         @click="importSubscriptions"
@@ -29,7 +29,7 @@
     <h4 class="groupTitle">
       {{ $t('History.History') }}
     </h4>
-    <FtFlexBox class="dataSettingsBox">
+    <FtFlexBox class="box">
       <FtButton
         :label="$t('Settings.Data Settings.Import History')"
         @click="importWatchHistory"
@@ -42,7 +42,7 @@
     <h4 class="groupTitle">
       {{ $t('Playlists') }}
     </h4>
-    <FtFlexBox class="dataSettingsBox">
+    <FtFlexBox class="box">
       <FtButton
         :label="$t('Settings.Data Settings.Import Playlists')"
         @click="importPlaylists"
@@ -55,7 +55,7 @@
     <h4 class="groupTitle">
       {{ t('Settings.Data Settings.Search history') }}
     </h4>
-    <FtFlexBox class="dataSettingsBox">
+    <FtFlexBox class="box">
       <FtButton
         :label="t('Settings.Data Settings.Import search history')"
         @click="importSearchHistory"
@@ -84,27 +84,27 @@
 
 <script setup>
 import { computed, ref } from 'vue'
-import { useI18n } from '../composables/use-i18n-polyfill'
+import { useI18n } from '../../composables/use-i18n-polyfill'
 import { useRouter } from 'vue-router'
 
-import FtButton from './FtButton/FtButton.vue'
-import FtFlexBox from './ft-flex-box/ft-flex-box.vue'
-import FtPrompt from './FtPrompt/FtPrompt.vue'
-import FtSettingsSection from './FtSettingsSection/FtSettingsSection.vue'
+import FtButton from '../FtButton/FtButton.vue'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+import FtPrompt from '../FtPrompt/FtPrompt.vue'
+import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 
-import store from '../store/index'
+import store from '../../store/index'
 
-import { MAIN_PROFILE_ID } from '../../constants'
-import { calculateColorLuminance, getRandomColor } from '../helpers/colors'
+import { MAIN_PROFILE_ID } from '../../../constants'
+import { calculateColorLuminance, getRandomColor } from '../../helpers/colors'
 import {
   deepCopy,
   escapeHTML,
   getTodayDateStrLocalTimezone,
   readFileWithPicker,
   showToast,
   writeFileWithPicker,
-} from '../helpers/utils'
-import { processToBeAddedPlaylistVideo } from '../helpers/playlists'
+} from '../../helpers/utils'
+import { processToBeAddedPlaylistVideo } from '../../helpers/playlists'
 
 const IMPORT_DIRECTORY_ID = 'data-settings-import'
 const START_IN_DIRECTORY = 'downloads'
@@ -1403,3 +1403,5 @@ async function exportYouTubeSearchHistory() {
 
 // #endregion search history
 </script>
+
+<style scoped src="./DataSettings.css" />

src/renderer/components/FtSettingsSection/FtSettingsSection.scss

@@ -16,14 +16,14 @@
   background-color: var(--card-bg-color);
   padding-block: 10px;
 
-  > div {
+  > :deep(div) {
     box-sizing: border-box;
     padding-block: 0;
     padding-inline: 20px;
     inline-size: 100%;
   }
 
-  > div:not(:last-child, .ft-flex-box) {
+  > :deep(div:not(:last-child, .ft-flex-box)) {
     @media only screen and (width <= 800px) {
       margin-block-end: 20px;
     }
@@ -36,10 +36,6 @@
   margin-block: 0.5em;
 }
 
-.dataSettingsBox {
-  justify-content: center;
-}
-
 :deep(.groupTitle) {
   text-align: center;
   margin-block: 0.5em;
@@ -90,10 +86,8 @@
 
 @media only screen and (width <= 680px) {
   .settingsSection {
-    > div {
-      :deep(.text.bottom) {
-        inset-inline-start: -85px;
-      }
+    > :deep(div .text.bottom) {
+      inset-inline-start: -85px;
     }
 
     :deep(.switch-ctn.containsTooltip) {
@@ -103,16 +97,14 @@
       padding-inline: 10px;
     }
 
-    :not(.select, .selectLabel) {
-      > :deep(.tooltip) {
-        display: inline-block;
-        position: absolute;
-        inset-inline-end: -25px;
-        inset-block-start: 12px;
-      }
+    :deep(:not(.select, .selectLabel) > .tooltip) {
+      display: inline-block;
+      position: absolute;
+      inset-inline-end: -25px;
+      inset-block-start: 12px;
     }
 
-    .settingsFlexStart460px :deep(.tooltip) {
+    :deep(.settingsFlexStart460px .tooltip) {
       inset-inline-end: 0;
       inset-block-start: -2px;
     }

src/renderer/components/FtToggleSwitch/FtToggleSwitch.scss

@@ -79,6 +79,10 @@
   }
 }
 
+.containsTooltip .switch-label-text {
+  margin-inline-end: 5px;
+}
+
 .disabled {
   .switch-label {
     cursor: not-allowed;

src/renderer/views/Settings/Settings.js

@@ -7,7 +7,7 @@ import ExternalPlayerSettings from '../../components/ExternalPlayerSettings.vue'
 import SubscriptionSettings from '../../components/SubscriptionSettings/SubscriptionSettings.vue'
 import DownloadSettings from '../../components/DownloadSettings/DownloadSettings.vue'
 import PrivacySettings from '../../components/PrivacySettings.vue'
-import DataSettings from '../../components/DataSettings.vue'
+import DataSettings from '../../components/DataSettings/DataSettings.vue'
 import DistractionSettings from '../../components/DistractionSettings/DistractionSettings.vue'
 import ProxySettings from '../../components/ProxySettings/ProxySettings.vue'
 import SponsorBlockSettings from '../../components/SponsorBlockSettings.vue'