fix(docs-infra): prevent tab labels from being clipped

erkamyaman · erkamyaman · commit 97855346e34d · 2026-07-03T22:31:29.000+03:00
The active docs tab applied a 2px bottom border that inactive tabs lacked,
which shrank the active label's content box and clipped its descenders. It
also set `line-height: 1.5` only on the active label, so switching tabs
nudged the text. Reserve the border as transparent on every tab and recolor
it on the active one, and share the label `line-height`, so the letters are
no longer cut and the label stays put when switching.
diff --git a/adev/shared-docs/styles/_resets.scss b/adev/shared-docs/styles/_resets.scss
@@ -310,16 +310,15 @@
 
       .mdc-tab {
         padding-inline: 15px !important;
+        border-block-end: 2px solid transparent;
       }
 
       .mdc-tab__text-label {
         transition: none;
+        line-height: 1.5;
       }
 
       .mdc-tab--active {
-        border: 0;
-        border-block-end-width: 2px;
-        border-style: solid;
         border-image: var(--purple-to-blue-horizontal-gradient) 1;
 
         .mdc-tab__text-label {
