Toolbar in top position does not show labels

[mauritsvanrees]

I like the toolbar on top instead of on the side, for easier theming. But the labels for the actions (Contents, View, Edit, etc) are not shown. I checked, and until Plone 6 alpha 4 they were still shown. It seems this change was not intentional.

At first glance it seems easy enough to fix with a few lines of css, the labels are there but simply have display:none. Maybe only on breakpoint large or xl and up, to be safe. I can have a go at it.

[mauritsvanrees]

So in Plone 6.0.5 it looks like this in a customer project:

I can add this scss:

body.plone-toolbar-top .toolbar-label {
    display: inline-block;
}

Result:

Nice! But wait, this is very long, and actually too long: we are missing Syndication.

On a standard Plone site, it actually works, but only on the site root or a page: folders usually have too many tabs.

So for starters we may only do this from the largest breakpoint, xxl at 1400:

@include media-breakpoint-up(xxl) {
    body.plone-toolbar-top .toolbar-label {
        display: inline-block;
    }
}

How does it look at 1400 pixels then?

Not so good, we now see that items are flowing over on a second line. They are only really visible when you hover over them, like here with the History tab. Sharing, Rules, and Syndication are not visible, being white on white.

The font size is a bit big, so we have some room there. This is the first size that fits:

@include media-breakpoint-up(xxl) {
    body.plone-toolbar-top .toolbar-label {
        display: inline-block;
        font-size: 0.4rem;
    }
}

That is really much too small.

So this is not working!

Some possible solutions:

• Dynamically only show the ones that fit, and show the others without label.
• Show classic tooltips for all of them when you hover over them. We already do this, but several are missing now. Only the ones in the middle section between pipes have them. And they are longer descriptions, not short labels.
• Show the labels immediately as dropdown when you hover over a tab. The current tooltips are small and take noticeably long to appear.
• Support two rows of the toolbar...

This is much harder than the few lines of css I had in mind... I will remove myself as assignee. But I hope someone will pick this up.

[yurj]

I would add a "..." icon at the end where to collapse things that does not fit. The problem is the usability.

Another solution could be to remove icons but does not fit if the tabs increases.

I think that the real solution is to have only an hamburger menu that when clicked show a vertical and scrollable menu as we do in mobile.

Anyway, it is a design problem. You can't have a top vertical menu with a variable number of tabs that fits any use case.