Tabs on Speaker Show Page don't wrap on mobile

[marcoroth]

Right now the tabs on the speaker show page don't wrap and thus let the whole page content overflow and expand because of it.

[adrienpoly]

In TailwindUI Tabs in mobile become select

This other alternative is to make the tabs header scrollable

[marcoroth]

I'm surprised daisyUI doesn't handle it out of the box.

[nicogaldamez]

@marcoroth, could you share a screenshot to help us understand the issue better? Which tabs are you referring to?

[marcoroth]

Here for example:

https://www.rubyvideo.dev/talks/a-brewer-s-guide-to-filtering-out-complexity-and-churn-rocky-mountain-ruby-2024

[nicogaldamez]

Thanks, @marcoroth, that helps a lot!

Along with the TailwindUI select option, here are two more alternatives based on GitHub's UI approach.

1. How about a list of collapsible items (accordion-style)? Imagine something like this, but instead of navigating to another page, it expands in place.

2. Using horizontally scrollable tabs. We may want to add a background to make it clear to users that they can scroll to see more

[adrienpoly]

I like the collapsible option very much but in our case given the length of the transcript tab it might not be really suitable.

The select option from TailwindUI is the most responsive but I am not a big fan of the UX (open to change my mind)

I think scrollable tab would be a good candidate here

my 2 cents

[adrienpoly]

following to this change https://github.com/adrienpoly/rubyvideo/pull/413 the tabs do wrap now on mobile. Maybe not optimum but at least better than creating an overflow.

given also the changes in #423 at least now the talks#show page should not overflow anymore

We might still want to make here the tabs scrollable to prevent the wrap?