When you have more than a few tabs, at narrow screen sizes, the tabs bust the UI

[johnwbaxter]

When you bring the width of the editor down (for example when using live preview on a smaller screen), if you have a few tabs, it all overlaps each other. See screenshot below:

It gets worse when you get even narrower, with this many tabs!

It's far from ideal, but you can get round this if you inject you tabs a smidge further up the dom and then someone like me with this very specific issue can add css cp that changes the tabs position from absolute to relative...but I'm sure there is a better solution!

[mmikkel]

Thanks for reporting that, @johnwbaxter. I'll have a closer look at it as soon as I have the time.

[johnwbaxter]

Cool, cheers @mmikkel !!

[mmikkel]

Update: I've taken a closer look at this; there's no quick fix and since there are multiple problems with the current implementation of block tabs I've decided to rework how they are implemented from scratch, to increase accessibility overall. I can't give an ETA for that update but will make sure to accommodate the use case where the total width of the tabs is wider than the available horizontal space.

[mmikkel]

I mean, you presented a quick fix. But that would only kick the bucket a bit further down the road; I think a proper solution would either collapse the tabs into a disclosure menu, or make them horizontally scrollable, when the available horizontal space is too small.

I'm leaning towards a disclosure menu because that would probably be the most consistent in terms of the overall Craft CP UI, but I'm very open for opinions as to which of those options would feel like the better (and most accessible) UX.

[johnwbaxter]

@mmikkel Hey man, any news on this one? Could we sponsor this feature in some way if that helps?

[mmikkel]

Hi @johnwbaxter, I haven't had the time to look into this one yet – will update this issue when there's something to report. And thank you for the offer; I'm not really interested in that but I'll try my best to make this a priority, as soon as I have some available time.

[johnwbaxter]

Hey @mmikkel, ok no worries, thank you :)

[mmikkel]

Considering MatrixMate is retired for Craft 5, I've decided to not put any significant time into the plugin at this point beyond making sure things "mostly work" for Craft 4 until its EOL. Sorry!

[johnwbaxter]

@mmikkel Ok, understood, thanks!