Add labels to tabs

[ptbrowne]

Goals

Add labels to tabs in editor mode and preview mode.
We use the title of the charts.

The behavior of the tabs is as follows:

• Each tab is of the same size for consistency
• The ellipsis of the title is done by a semi transparent element
• The tabs have a minimum width
• The tabs list content can scroll once the tabs are too numerous and cannot shrink
• The tabs list also indicate cut-off content via semi transparent element

How to test

1. Open a chart
2. Add 4 to 5 charts
3. Add titles to each of the charts

Result

tabs-title.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
visualization-tool	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 10, 2024 3:29pm

[bprusinowski]

LGTM 💯

Just a few thoughts, that do not block merging :)

I am not sure if we need to have this alone horizontal divider? 😄

Also I personally find it better when the Plus button was "sticky" to the current tab, currently there's a bigger gap 🤔

[ptbrowne]

Sure, both behavior were not wanted ;) I fixed them.

[bprusinowski]

Looks great now, thanks 💯