How to center tabs, show underline and collapse tabs if the screen size becomes smaller than box size?

[Donnerstagnacht]

I would like to create the following behaviour:

• The tabs are centered on the page and show the underline
• if screen size is larger than the tab box, all tabs are shown
• if screen size is smaller than the tab box, tabs are collapsed to with more.
• it should be reuseable, e.g. without a hard-coded width input.

After reducing screen size:

I made an example in stackblitz using an input width value. But that makes the size dependent on the tab labels. I tried using fit-content and combinations with max-width, but could not make it work. Can someone suggest a solution?

https://stackblitz.com/edit/angular-ojtavzaz?file=src%2Fapp%2Fapp.template.html

export class App {
  width = input<string>('460px');
}

<tui-tabs-with-more
  [style]="{ width: width(), maxWidth: '90vw', margin: 'auto' }"
>
  <button *tuiItem iconStart="@tui.credit-card" tuiTab>Maps</button>
  <button *tuiItem iconStart="@tui.phone" tuiTab>Calls</button>
  <button *tuiItem iconStart="@tui.settings" tuiTab>Settings</button>
  <button *tuiItem iconStart="@tui.heart" tuiTab>Favorite</button>
  <button *tuiItem iconStart="@tui.trash" tuiTab>Trash</button>
</tui-tabs-with-more>

Is it possible to make it work?

[waterplea]

I think it's enough to just put justify-content: center; on tui-tabs-with-more

[Donnerstagnacht]

That centers the element but then the underline stretches across the screen. If I use fit content, then it collapses

[waterplea]

Here's the best I could come up with, it's a bit hacky but gets you where you want to be:
https://stackblitz.com/edit/angular-ojtavzaz-buszbpy5
TabsWithMore consists of Tabs + More button with a margin between them. I removed shadow from the main element and added it back in on Tabs and a button. I had to use ::before element so I could cover that margin area too. And since ::before element is reserved for a left side icon, I had to reset some styles like size and background.

[Donnerstagnacht]

Pretty cool! Big thanks for the effort!