From 77648a650ba6e8a7c71a304c1e3962f7ae5bdbf1 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Wed, 20 Nov 2024 01:43:21 +0800
Subject: [PATCH] fix(home): resolve home tabs style issues

---
 src/contentScripts/views/Home/Home.vue | 60 +++++++++++++++++---------
 1 file changed, 39 insertions(+), 21 deletions(-)

diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index 90bff0ee..d245c392 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -198,33 +198,42 @@ function toggleTabContentLoading(loading: boolean) {
         <section
           v-if="!(!settings.alwaysShowTabsOnHomePage && currentTabs.length === 1)"
           style="backdrop-filter: var(--bew-filter-glass-1)"
-          flex="~ items-center gap-1 wrap"
           bg="$bew-elevated" p-1
-          h-38px
-          rounded-full
+          h-38px rounded-full
+          text="sm"
           shadow="[var(--bew-shadow-1),var(--bew-shadow-edge-glow-1)]"
           box-border border="1 $bew-border-color"
         >
-          <button
-            v-for="tab in currentTabs" :key="tab.page"
-            :class="{ 'tab-activated': activatedPage === tab.page }"
-            px-4 h-full
-            bg="transparent hover:$bew-fill-2" rounded-full
-            cursor-pointer duration-300
-            flex="~ gap-2 items-center" relative
-            @click="handleChangeTab(tab)"
+          <OverlayScrollbarsComponent
+            class="home-tabs-inside"
+            element="div" defer
+            :options="{
+              x: 'scroll',
+              y: 'hidden',
+            }"
+            h-full of-hidden
           >
-            <span class="text-center">{{ $t(tab.i18nKey) }}</span>
+            <button
+              v-for="tab in currentTabs" :key="tab.page"
+              :class="{ 'tab-activated': activatedPage === tab.page }"
+              px-3 h-inherit
+              bg="transparent hover:$bew-fill-2" rounded-full
+              cursor-pointer duration-300
+              flex="~ gap-2 items-center shrink-0" relative
+              @click="handleChangeTab(tab)"
+            >
+              <span class="text-center">{{ $t(tab.i18nKey) }}</span>
 
-            <Transition name="fade">
-              <div
-                v-show="activatedPage === tab.page && tabContentLoading"
-                i-svg-spinners:ring-resize
-                pos="absolute right-4px top-4px" duration-300
-                text="8px $bew-text-auto"
-              />
-            </Transition>
-          </button>
+              <Transition name="fade">
+                <div
+                  v-show="activatedPage === tab.page && tabContentLoading"
+                  i-svg-spinners:ring-resize
+                  pos="absolute right-4px top-4px" duration-300
+                  text="8px $bew-text-auto"
+                />
+              </Transition>
+            </button>
+          </OverlayScrollbarsComponent>
         </section>
 
         <div
@@ -296,6 +305,15 @@ function toggleTabContentLoading(loading: boolean) {
   --uno: "important-translate-y--70px";
 }
 
+.home-tabs-inside {
+  :deep([data-overlayscrollbars-contents]) {
+    --uno: "flex items-center gap-1 h-inherit rounded-full";
+  }
+  :deep(.os-scrollbar) {
+    --uno: "mb--4px";
+  }
+}
+
 .tab-activated {
   --uno: "bg-$bew-theme-color-auto text-$bew-text-auto border-$bew-theme-color dark:border-white";
 }