fix(tabs): selection indicator scroll overflow border

CSS-242

Author: Yosevu Kilonzo

components/tabs/skin.css

@@ -19,12 +19,26 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Tabs-selectionIndicator {
-  background-color: var(--spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected);
+  --spectrum-tabs-list-background-direction: right;
+
+  background: linear-gradient(
+    to var(--spectrum-tabs-list-background-direction),
+    var(--spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected) 0,
+    var(--spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected)
+    var(--spectrum-tabs-quiet-textonly-divider-size),
+    transparent var(--spectrum-tabs-quiet-textonly-divider-size)
+  );
 }
 
 .spectrum-Tabs--emphasized {
   .spectrum-Tabs-selectionIndicator {
-    background-color: var(--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected);
+    background: linear-gradient(
+      to var(--spectrum-tabs-list-background-direction),
+      var(--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected) 0,
+      var(--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected)
+      var(--spectrum-tabs-quiet-textonly-divider-size),
+      transparent var(--spectrum-tabs-quiet-textonly-divider-size)
+    );
   }
 }