panel-tabs with lots of tabs is not responsive

[leolivier]

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version [1.0.1]
My browser is: Firefox and Edge
I am sure this issue is not a duplicate

Description

I have the following html piece:

<section class="panel">
		<p class="panel-heading">Statistics</p>
		<div class="panel-tabs">
			<a class="stat-category is-active" data-category="site">Site</a>
			<a class="stat-category " data-category="members">Members</a>
			<a class="stat-category " data-category="galleries">Galleries</a>
			<a class="stat-category " data-category="forums">Forums</a>
			<a class="stat-category " data-category="chats">Chats</a>
			<a class="stat-category " data-category="administrator">Administrator</a>
		</div>
		<div class="panel-category" id="category-site" style="">
			<div class="panel-block">
			...

When displayed on a mobile phone, what I see is

So I don't see the "Site" tab on the left, and I cannot swipe left to try to see it.
(I can swipe right and see "Administrator" in full)

Steps to Reproduce

See above

Expected behavior

At least, be able to swipe left.
I tried to change the justify-content from center to left and then I can see Sites and swipe right up to "Administrator"

Or maybe restack the tabs vertically when they don't fit horizontally?

[leolivier]

FYI, I just added in my "custom.css" the lines and it solved the issue

panel-tabs {
	flex-wrap: wrap;
}

I don't know if it should applied to whole Bulma...

[jgthms]

Yeah it's a tricky one because some people prefer scrolling (which would require a parent element to be scrollable), some people prefer wrapping like you did.

I'll close this for now because I think it's better to leave it to each developer but thanks for the update.

[guest20]

Maybe a class="tabs does-linewrap" could be worth including in the library?

I have some css I copy/pasted from an earlier issue #1344 to make my tavs wrap...

It might be worth including a default one way or the other, since the current default is a 3rd, unusable choice where the items aren't visible and can't be accessed (until someone reports a bug)

[jgthms]

You can already use the Flexbox helper is-flex-wrap-wrap: https://bulma.io/documentation/helpers/flexbox-helpers/