From 7e57d8eb0ac6f4cf51b0e21d4696e31172007170 Mon Sep 17 00:00:00 2001
From: preetibansalui <146315451+preetibansalui@users.noreply.github.com>
Date: Tue, 11 Jun 2024 12:00:33 +0530
Subject: [PATCH] fix: extra arrow in tab component on resize (#16652)

* fix: extra arrow in tab component on resize

* fix: firefox support

* fix: left arrow was not visible

* fix: previous arrow in contained story

---------

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
---
 packages/react/src/components/Tabs/Tabs.tsx     | 11 +++++++----
 packages/styles/scss/components/tabs/_tabs.scss |  9 +++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx
index fab0367b0588..c441bbe3d3ca 100644
--- a/packages/react/src/components/Tabs/Tabs.tsx
+++ b/packages/react/src/components/Tabs/Tabs.tsx
@@ -438,9 +438,10 @@ function TabList({
   });
 
   useEffect(() => {
+    //adding 1 in calculation for firefox support
     setIsNextButtonVisible(
       ref.current
-        ? scrollLeft + buttonWidth + ref.current.clientWidth <
+        ? scrollLeft + buttonWidth + ref.current.clientWidth + 1 <
             ref.current.scrollWidth
         : false
     );
@@ -450,7 +451,7 @@ function TabList({
         setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth);
       }
     }
-  }, [scrollLeft, children, dismissable]);
+  }, [scrollLeft, children, dismissable, isScrollable]);
 
   useEffectOnce(() => {
     if (tabs.current[selectedIndex]?.disabled) {
@@ -467,12 +468,14 @@ function TabList({
 
   useIsomorphicEffect(() => {
     if (ref.current) {
-      setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth);
+      //adding 1 in calculation for firefox support
+      setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth + 1);
     }
 
     function handler() {
       if (ref.current) {
-        setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth);
+        //adding 1 in calculation for firefox support
+        setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth + 1);
       }
     }
 
diff --git a/packages/styles/scss/components/tabs/_tabs.scss b/packages/styles/scss/components/tabs/_tabs.scss
index a60d611f954f..52cc8d8acde0 100644
--- a/packages/styles/scss/components/tabs/_tabs.scss
+++ b/packages/styles/scss/components/tabs/_tabs.scss
@@ -112,6 +112,7 @@
     }
 
     .#{$prefix}--tab--overflow-nav-button svg {
+      z-index: 2;
       fill: $icon-primary;
     }
 
@@ -155,16 +156,16 @@
     .#{$prefix}--tab--overflow-nav-button--previous::before {
       position: absolute;
       z-index: 1;
-      background: linear-gradient(to left, rgba(255, 255, 255, 0), $background);
+      background: $background;
       block-size: 100%;
       content: '';
-      inline-size: $spacing-03;
-      inset-inline-end: -$spacing-03;
+      inline-size: $spacing-08;
+      inset-inline-end: 0;
     }
 
     &.#{$prefix}--tabs--contained
       .#{$prefix}--tab--overflow-nav-button--previous::before {
-      background-image: linear-gradient(
+      background: linear-gradient(
         to left,
         rgba(255, 255, 255, 0),
         $layer-accent