Scrollable Tab or icon for scroll when the Tab width exceeds the container width

[Puspendert]

Feature Request

The Tabs gets hidden or it makes its parent element scroll when the width of Tab exceeds its container width. Shouldn't this be handled using either of two:

1. The Tab itself gets scrollable
2. An icon gets added to the ends of the Tab

Sample
https://codesandbox.io/s/fomantic-tab-issue-v6er3?file=/src/App.js

I tried it by changing the fomantic CSS as

.ui.secondary.pointing.menu{
    overflow-x: scroll;
    overflow-y: hidden;
    &::-webkit-scrollbar {
      display: none;
      width: 0;
      background: transparent;
    }
 }

But this made the active Tab bottom border gone. Also, the scrollbar not hiding.

[GammaGames]

I've run into a similar design issue before, I used JS to dynamically create a simple dropdown on the right side. It would be nice if the tab container could detect when it is overflowing and update the dropdown manually though.

https://jsfiddle.net/h61dvjbz/

(I know this isn't directly related to your request, I just thought I'd mention a solution I've used before)

[SeanSun6814]

I'm working on resolving this issue!