Fix tab-group vertical scroll bar jittering.

Author: belahorvath

docs/changelog.md

@@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 ### Fixed
 
 - Fixed `six-checkbox` checkbox-input being distorted with multiline content/text
+- tab group animation smoothing when using left / right layout
 
 ## 4.2.1 - 2024-03-14
 

libraries/ui-library/src/components/six-tab/six-tab.scss

@@ -43,6 +43,22 @@
   &:hover:not(.tab--disabled) {
     color: var(--six-tab-color-hover);
   }
+
+  &.tab--left,
+  &.tab--right {
+    display: inline-block;
+    text-align: left;
+  }
+
+  &.tab--left::before,
+  &.tab--right::before {
+    display: block;
+    font-weight: var(--six-font-weight-bold);
+    content: attr(title);
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
 }
 
 .tab__close-button {

libraries/ui-library/src/components/six-tab/six-tab.tsx

@@ -88,6 +88,7 @@ export class SixTab {
           aria-disabled={this.disabled ? 'true' : 'false'}
           aria-selected={this.active ? 'true' : 'false'}
           tabindex={this.disabled || !this.active ? '-1' : '0'}
+          title={this.host.innerHTML}
         >
           <slot />
           {this.closable && (