From 60290d3e5439fac8093626988a04a30e7df48f42 Mon Sep 17 00:00:00 2001
From: Miguel Angel <me@miguelangel.co>
Date: Mon, 26 Feb 2024 12:44:04 -0400
Subject: [PATCH 1/2] fix: show navigate button

---
 src/components/TabsBar.vue | 72 ++++++++++++++++++++++++--------------
 1 file changed, 46 insertions(+), 26 deletions(-)

diff --git a/src/components/TabsBar.vue b/src/components/TabsBar.vue
index c80c0ed1c..236cf0ff3 100644
--- a/src/components/TabsBar.vue
+++ b/src/components/TabsBar.vue
@@ -9,24 +9,25 @@
     @input="tabOpened"
   >
     <template #tabs-start>
-      <div>
-        <slot name="tabs-start" />
-        <div class="tabs-sticky d-flex flex-row tabs-start">
+      <div class="tabs-sticky d-flex flex-row tabs-start">
+        <div
+          v-show="tabsListOverflow"
+          class="position-relative overflow-visible"
+        >
           <div
-            v-show="tabsListOverflow && showLeftScroll"
-            class="position-relative overflow-visible"
+            role="link"
+            class="nav-scroll nav-scroll-left"
+            data-test="scroll-left"
+            @click="scrollTabsLeft"
           >
-            <div
-              role="link"
-              class="nav-scroll nav-scroll-left"
-              data-test="scroll-left"
-              @click="scrollTabsLeft"
-            >
-              <i class="fas fa-chevron-left" />
-            </div>
+            <i class="fas fa-chevron-left" />
           </div>
         </div>
       </div>
+
+      <div :class="{'dd-ml': tabsListOverflow}">
+        <slot name="tabs-start" />
+      </div>
     </template>
     <b-tab
       v-for="(index, n) in localOpenedPages"
@@ -58,7 +59,7 @@
     </b-tab>
     <template #tabs-end>
       <div
-        v-show="tabsListOverflow && showRightScroll"
+        v-if="tabsListOverflow"
         class="tabs-sticky overflow-visible"
       >
         <div
@@ -127,15 +128,16 @@ export default {
     }
   },
   mounted() {
-    // check resize of tabs list
-    window.addEventListener("resize", this.checkTabsOverflow);
-    setTimeout(() => {
-      this.checkTabsOverflow();
-      this.checkScrollPosition();
-    }, 0);
-    // listen to scroll event
-    const tablist = this.$refs.tabs.$el.querySelector(".nav-tabs");
-    tablist.addEventListener("scroll", () => this.checkScrollPosition());
+    this.checkTabsOverflow();
+    this.checkScrollPosition();
+
+    this.$nextTick(() => {
+      // check resize of tabs list
+      window.addEventListener("resize", this.checkTabsOverflow);
+      // listen to scroll event
+      const tablist = this.$refs.tabs.$el.querySelector(".nav-tabs");
+      tablist.addEventListener("scroll", this.checkScrollPosition);
+    });
   },
   beforeDestroy() {
     window.removeEventListener("resize", this.checkTabsOverflow);
@@ -226,6 +228,12 @@ export default {
   flex-wrap: nowrap !important;
   overflow: hidden !important;
 }
+
+.nav-tabs .nav-item .nav-link {
+  display: flex;
+  align-items: center;
+}
+
 /* Style for individual tabs */
 .nav-tabs .nav-item.show .nav-link,
 .nav-tabs .nav-link.active {
@@ -250,6 +258,16 @@ export default {
   flex-wrap: nowrap !important;
 }
 
+.nav-tabs .nav-item .nav-link:not(.active) {
+  .badge {
+    background-color: #6A7888 !important;
+  }
+
+  span:not(.badge, .close-tab) {
+    color: #556271 !important;
+  }
+}
+
 /* Style for the hover effect */
 .nav-tabs .nav-link:hover {
   border: none;
@@ -261,7 +279,6 @@ export default {
 /* Adding the 'x' button to the tab */
 .nav-tabs .nav-link .close-tab {
   font-size: 0.8rem;
-  margin-top: 0.4rem;
   color: var(--tabs-light);
   margin-left: 0.5rem;
   display: inline !important;
@@ -289,10 +306,10 @@ export default {
   z-index: 1;
 }
 .nav-tabs .nav-scroll-right {
-  right: 0;
+  right: 5px;
 }
 .nav-tabs .nav-scroll-left {
-  left: 0;
+  margin-left: 5px;
 }
 .nav-tabs .tabs-sticky {
   position: sticky;
@@ -311,4 +328,7 @@ export default {
 .flat-tabs .h-tab {
   height: calc(100% - 42px) !important;
 }
+.dd-ml {
+  margin-left: 2rem;
+}
 </style>

From 5adee9256d4ceabf1db48ae19a178e7ea6bd88c3 Mon Sep 17 00:00:00 2001
From: Miguel Angel <me@miguelangel.co>
Date: Mon, 26 Feb 2024 15:38:02 -0400
Subject: [PATCH 2/2] fix: page tabs stories

---
 src/components/TabsBar.vue      | 9 ++++++---
 src/stories/PageTabs.stories.js | 4 ++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/TabsBar.vue b/src/components/TabsBar.vue
index 236cf0ff3..2e56572eb 100644
--- a/src/components/TabsBar.vue
+++ b/src/components/TabsBar.vue
@@ -128,16 +128,19 @@ export default {
     }
   },
   mounted() {
-    this.checkTabsOverflow();
-    this.checkScrollPosition();
-
     this.$nextTick(() => {
       // check resize of tabs list
       window.addEventListener("resize", this.checkTabsOverflow);
       // listen to scroll event
       const tablist = this.$refs.tabs.$el.querySelector(".nav-tabs");
       tablist.addEventListener("scroll", this.checkScrollPosition);
+
+      Promise.resolve().then(() => {
+        this.checkTabsOverflow();
+        this.checkScrollPosition();
+      });
     });
+
   },
   beforeDestroy() {
     window.removeEventListener("resize", this.checkTabsOverflow);
diff --git a/src/stories/PageTabs.stories.js b/src/stories/PageTabs.stories.js
index 1666f79ed..49c9b2449 100644
--- a/src/stories/PageTabs.stories.js
+++ b/src/stories/PageTabs.stories.js
@@ -204,7 +204,7 @@ export const ALotOfPagesOpen = {
     const scrollRight = canvas.getByTestId("scroll-right");
 
     await waitFor(() => expect(scrollRight).toBeVisible());
-    await waitFor(() => expect(scrollLeft).not.toBeVisible());
+    await waitFor(() => expect(scrollLeft).toBeVisible());
 
     // Scroll to the right
     await step("Scroll to the right", async () => {
@@ -215,7 +215,7 @@ export const ALotOfPagesOpen = {
     // Scroll to the left
     await step("Scroll to the left", async () => {
       scrollLeft.click();
-      await waitFor(() => expect(scrollLeft).not.toBeVisible());
+      await waitFor(() => expect(scrollLeft).toBeVisible());
     });
   }
 };