Tabs hidden when titles exceed the content area width (no ability to scroll)

[blipk]

Summary

If you have too many tabs, or even a couple with long titles, and their total width exceeds the main area with, the latter ones become inaccessible.

There should be an ability to scroll through them, perhaps just some small arrows at each end.

Steps to reproduce

Code snippet:

tab_names = []
for i in range(100):
  tab_names.append(str(i)*4)

tabs = st.tabs(tab_names)

Expected behavior:

Should be able to scroll the tab bar when tabs exceed the screen width, hiding them is bad UX.

Actual behavior:

My tabs are inaccessible.

Is this a regression?

no

Debug info

• Streamlit version: streamlit share
• Python version: 3.10
• Browser version: Chrome latest

Voting for feature requests

Community voting on feature requests enables the Streamlit team to understand which features are most important to our users.
If you'd like the Streamlit team to prioritize this feature request, please use the 👍 (thumbs up emoji) reaction in response to the initial post.

[LukasMasuch]

@blipk Thanks for reporting this! There are ways to scroll the tab panel, e.g. via vertical scrolling or via left/right arrow keys. However, I agree that it would make sense to also add a visual button/clue that allows scrolling via a mouse click or maybe drag & drop scrolling.

For other users reading this: please upvote the issue (👍) if you also want to have this implemented!

[blipk]

Thanks @LukasMasuch

Arrow keys work, but often if the tab names line up with the end right, you can't even see theres any extra ones so may not know.

I tried to scroll, but it doesn't seem to process/recieve the vertical scroll event like you say, it seems the page content is taking it.
My mouse doesn't support horizontally scrolling either, and thats not something really common unless you're dealing with large spreadsheets.

I think some kind of indicator that theres more tabs would be ideal at the least.

[blipk]

Related to https://github.com/uber/baseweb/issues/4857
Shift + Scrolling seems to work.

Perhaps we could add a baseui endEnhancer to the component? Exposied as an icon= kwarg, I believe st.info() and such uses the same, so should be an easy implementation for at least a minor user ux improvement.

@LukasMasuch

[steve7734]

I have the same issue. Another solution would be to spread the tabs control over multiple lines

[jrieke]

#6759 also proposed that we wrap the tabs over multiple lines.