From ac10f959292fc0ee86f36c08a8a76f5b9e03f6a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Horv=C3=A1th=2C=20B=C3=A9la?=
 <belahorvath@users.noreply.github.com>
Date: Wed, 20 Mar 2024 15:16:28 +0100
Subject: [PATCH] Fix tab-group vertical scroll bar jittering.

---
 docs/changelog.md                                |  1 +
 .../src/components/six-tab/six-tab.scss          | 16 ++++++++++++++++
 .../src/components/six-tab/six-tab.tsx           |  1 +
 3 files changed, 18 insertions(+)

diff --git a/docs/changelog.md b/docs/changelog.md
index aab9cdf99..3fe066f03 100644
--- a/docs/changelog.md
+++ b/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
 
diff --git a/libraries/ui-library/src/components/six-tab/six-tab.scss b/libraries/ui-library/src/components/six-tab/six-tab.scss
index 3b6a15533..fdb520349 100644
--- a/libraries/ui-library/src/components/six-tab/six-tab.scss
+++ b/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 {
diff --git a/libraries/ui-library/src/components/six-tab/six-tab.tsx b/libraries/ui-library/src/components/six-tab/six-tab.tsx
index 1af79927c..ff61ad453 100644
--- a/libraries/ui-library/src/components/six-tab/six-tab.tsx
+++ b/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 && (