Tabsheet's forward button does not scroll to the end when having TabSheetVariant.LUMO_TABS_SMALL

[SonReimer]

Description

Adding 10 tabs to a tabsheet with TabSheetVariant.LUMO_TABS_SMALL and defined width causes the forward button of the buttons not scrolling to the end. The forward button does not disappear and the last tab is not completely shown.

Expected outcome

It should work as it dos without the ThemeVariant

Minimal reproducible example

TabSheet tabSheet = new TabSheet();
tabSheet.setWidth("500px");
tabSheet.addThemeVariants(TabSheetVariant.LUMO_TABS_SMALL);
for (int i = 0 ; i < 10; i++
    tabSheet.add("Tabulator" + i, new VerticalLayout());
}

Steps to reproduce

1. Scroll the tabs to the right
2. Forward button does not disappear, last tab is not completely visible

Environment

Vaadin version(s): 23.3.0 OS:

Browsers

Chrome

[DiegoCardoso]

Hi @SonReimer

I tried your example, but I couldn't reproduce it when I scrolled the tabs from left to right with the trackpad:

https://user-images.githubusercontent.com/262432/207930672-9e7c0e3b-acc8-4387-bcbf-aefc166330dc.mp4

However, I was able to see what I think is the issue you are describing by repeatedly clicking on the last visible tab. The last tab is not fully visible until I click on the > button. Is that what you are experiencing?

https://user-images.githubusercontent.com/262432/207931243-c34bd051-3ab0-4a02-9c3e-80bd0b479e6c.mp4

[SonReimer]

At first I am wondering, how to scroll the tabs !?! I downloaded a fresh vaadin starter app. Now I experienced what you did on chrome, but on Firefox it works correct, when doing clicking. In my real world application I did some styling around my tabs, perhaps thats why there are more probelems than you had. I general I suggest there's a probklem calculation the width of the tabs.

[DiegoCardoso]

At first I am wondering, how to scroll the tabs !?!

The tabs have a horizontal scrollable area that you can scroll either with your trackpad (at least on macOS) or, in some cases, by holding a key (eg., Shift) while using the mouse wheel.

In my real world application I did some styling around my tabs, perhaps thats why there are more probelems than you had. I general I suggest there's a probklem calculation the width of the tabs.

That might be the case here, which needs to be addressed somehow.

[rolfsmeds]

@SonReimer, would it be possible for you to share the styles you applied to the tabs?

[rolfsmeds]

It's actually quite easy to reproduce: The problem is that the scroll buttons seem to make the tabs jump too far, so that, in the example below, where there are tabs numbered from 1 to 19, the tab that is at the very edge and just barely visible initially (Iterator 5) gets jumped over entirely, so that after the jump the leftmost tab visible is Iterator 6. The same thing happens in the next step with Iterator 10, where the rest of 10 and most of 11 are jumped over.

https://user-images.githubusercontent.com/4611559/233615018-35e177d1-145f-4b70-894f-ceee51415bd5.mov

The issue is not dependent on browser zoom or any theme variant or styling. The following code will do it:

        TabSheet tabSheet = new TabSheet();
        tabSheet.setWidth("600px");
        for (int i = 0 ; i < 20; i++) {
            tabSheet.add("Tabulator" + i, new VerticalLayout());
        }

Same behavior in Chrome, FF and Safari.

Recategorizing as Major severity, High impact, as keyboard-bound users may be unable to reach some tabs entirely.