refactor: adjust style

src/components/Settings/components/General.vue

@@ -127,7 +127,7 @@ function resetDockContent() {
         <draggable
           v-model="settings.dockItemVisibilityList"
           item-key="page"
-          :component-data="{ style: 'display: flex; gap: 0.5rem;' }"
+          :component-data="{ style: 'display: flex; gap: 0.5rem; flex-wrap: wrap;' }"
         >
           <template #item="{ element }">
             <div

src/contentScripts/views/Home/Home.vue

@@ -144,7 +144,7 @@ onUnmounted(() => {
         ease-in-out
         :class="{ hide: shouldMoveTabsUp }"
       >
-        <ul flex="~ items-center gap-3">
+        <ul flex="~ items-center gap-3 wrap">
           <li
             v-for="tab in tabs" :key="tab.value"
             px-4 lh-35px bg="$bew-elevated-1 hover:$bew-elevated-1-hover" backdrop-glass rounded="$bew-radius"
@@ -152,7 +152,7 @@ onUnmounted(() => {
             :class="{ 'tab-activated': activatedPage === tab.value }"
             @click="activatedPage = tab.value"
           >
-            {{ tab.label }}
+            <span class="text-center">{{ tab.label }}</span>
           </li>
         </ul>
       </header>