jgthms / bulma

Modern CSS framework based on Flexbox
https://bulma.io
MIT License
49.14k stars 3.95k forks source link

panel-tabs with lots of tabs is not responsive #3866

Open leolivier opened 1 month ago

leolivier commented 1 month ago

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 image

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 commented 1 month ago

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

panel-tabs {
    flex-wrap: wrap;
}

image

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