Top navigation - The username and the 'More options' button are not positioned correctly when shrinking the page

[pcenov]

Observed behavior

This is a follow-up to #12775 as the issue is present on develop:

The tabs in the navigation should go to the second line when there isn't enough space, and only after that we should be showing the ... button. See the video:

responsive.mp4

Steps to reproduce the issue

1. Install the latest develop build
2. Use a long facility name and username
3. Go to Coach > Class home and start shrinking the page to see the responsive design behavior

Usage Details

Windows 11, Ubuntu 22 - Chrome

[pcenov]

@radinamatic

[abhirupPann]

@radinamatic Can I work on it?

[LianaHarris360]

Hi @abhirupPann, thanks for showing interest in fixing this issue! The issues open for contributors have a help wanted label, you can find some of those unassigned issues here.

[MisRob]

Regarding the requirement

The tabs in the navigation should go to the second line when there isn't enough space, and only after that we should be showing the ... button

When I worked on tab-like components, I recall that two and more lines were rather discouraged because it's slightly confusing experience for both mouse and keyboard users. I wonder if it'd rather make sense to keep it always one line with ... button as now and rather decrease the space taken by the facility name?

@marcellamaki @radinamatic @jtamiace thoughts?

[radinamatic]

Overflowing tabs in two lines may indeed be confusing, but the way I understood the reported issue and the recommendation was to (in cases like this) keep the facility name in the first line, and pass all the tabs together in the second line. This would at least make the need for ··· button to appear later, and only on the very narrow screens.

I think there is also a slight alignment issue of the ··· button: shouldn't it be left-aligned to the last visible tab? In the recording above it looks like right aligned to the username & icon... 🤔

[MisRob]

the way I understood the reported issue and the recommendation was to (in cases like this) keep the facility name in the first line, and pass all the tabs together in the second line

Oh I see, I interpreted differently. Yes, this would makes most sense.