Tabs: Decide on responsive approach and worst case scenarios

[mimarz]

We need to decide on how we should resolve the following use-case, and update code & guidelines in accordance.

• What are our recommendations for mobile?
• To long tab titles making tabs go outside viewport?

[TheTechArch]

Add this as example. 4 options go out of viewport. Example from here

[Barsnes]

I think there are a couple options, each with their own tradeoff. Personally I like scrollable tabs, which is probably the easiest solution, but it needs to communicate that you can scroll, either with an arrow or scrollbar. Maybe this could be coupled with a prop to only display the icon on mobile?
Other options would be change to dropdown or to stack them.

[mimarz]

Meeting 31.10.23

We decided we should implement horizontal overflow with scroll and button navigation.

Example: https://storybook.eds.equinor.com/?path=/docs/navigation-tabs--docs#overflow-with-nextprevious-buttons

[simon-archer]

Hey! Based on the previous comment, by @mimarz, is this issue resolved? Or anything else that should be considered in issue #1491 and #2449 that is not mentioned here?

[mimarz]

This has not been solved yet. We never got around to implementing previous comment. We'll make sure to find an answer to this before v1 tho.

[simon-archer]

This has not been solved yet. We never got around to implementing previous comment. We'll make sure to find an answer to this before v1 tho.

I'll be happy to try to find an answer and mark this as solved. Please let me know if there is anything specific that is blocking us from figuring this out :) The Equinor example seems to be a good solution for V1 at least.

I'm working on an updated version of the current Storybook documentation of the Tabs component at the moment.

[mrosvik]

Horizontal overflow with CSS should be fixed before V1. The buttons could come later.