When six-tab elements grow dynamically, navigation arrows don't show up

[FabianKueng]

Six Webcomponents version

4.0.3

Steps to reproduce

1. Create a tab group
2. Dynamically change the title of one of the tabs so it grows and pushes the other tab titels out of the tab group
3. Use the below code snippet to reproduce it: start typing in the input field and the tab named "Tab 10" will be pushed outside of the tab group without the navigation arrows showing up.

<six-input type="text" #title value="Title"></six-input>
<six-tab-group>
  <six-tab slot="nav" panel="general">{{ title.value }}</six-tab>
  <six-tab slot="nav" panel="custom">Tab 0</six-tab>
  <six-tab slot="nav" panel="custom1">Tab 1</six-tab>
  <six-tab slot="nav" panel="custom2">Tab 2</six-tab>
  <six-tab slot="nav" panel="custom3">Tab 3</six-tab>
  <six-tab slot="nav" panel="custom4">Tab 4</six-tab>
  <six-tab slot="nav" panel="custom5">Tab 5</six-tab>
  <six-tab slot="nav" panel="custom6">Tab 6</six-tab>
  <six-tab slot="nav" panel="custom7">Tab 7</six-tab>
  <six-tab slot="nav" panel="custom8">Tab 8</six-tab>
  <six-tab slot="nav" panel="custom9">Tab 9</six-tab>
  <six-tab slot="nav" panel="custom10">Tab 10</six-tab>
</six-tab-group>

What is expected?

The naviagation arrows should appear dynamically as soon as one of the tab group titles is not fully visible anymore.

Note: When resizing the window, the naviagation arrows actually show up!

What is actually happening?

The tab titles are being pushed outside of the tab group and are not accessible anymore, as the navigation arrows are not showing up dynamically:

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i7-9850H CPU @ 2.60GHz
    Memory: 11.36 GB / 31.80 GB
  Binaries:
    Node: 16.19.0 - C:\develop\bin\node16\node.EXE
    npm: 8.19.3 - C:\develop\bin\node16\npm.CMD
  Browsers:
    Edge: Chromium (121.0.2277.106)
    Internet Explorer: 11.0.19041.3636

Any additional comments?

No response