fix(tabs): Bottom border of .p-tabs__list spans full width on all s…

…creen sizes (#5457) * fix(tabs): Bottom border of `.p-tabs__list` spans full width on all screen sizes * fix incorrect height/thickness of the tabs list bottom border
canonical · Jan 24, 2025 · fa37ab5 · fa37ab5
1 parent 9085bf5
commit fa37ab5
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.20.1",
+  "version": "4.20.2",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

diff --git a/scss/_patterns_tabs.scss b/scss/_patterns_tabs.scss
@@ -8,18 +8,15 @@
     position: relative;
 
     &__list {
-      @extend %vf-pseudo-border--bottom;
-
+      // inset box shadow used to draw the border inside the list's box
+      box-shadow: inset 0 -1px 0 0 $colors--theme--border-default;
       display: flex;
       margin: 0 auto $spv--x-large;
       overflow-x: auto;
       padding: 0;
       position: relative;
       white-space: nowrap;
       width: 100%;
-      &::after {
-        background-color: $colors--theme--border-default;
-      }
     }
 
     &__item {