search

learningequality / kolibri

Kolibri Learning Platform: the offline app for universal education
https://learningequality.org/kolibri/
MIT License
807 stars 679 forks source link

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

Open pcenov opened 3 days ago

pcenov commented 3 days ago

Observed behavior

This is a follow-up to https://github.com/learningequality/kolibri/pull/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:

https://github.com/user-attachments/assets/d324f647-e98b-4ed3-9397-85248fec9568

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 commented 3 days ago

@radinamatic

abhirupPann commented 2 days ago

@radinamatic Can I work on it?

LianaHarris360 commented 2 days ago

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 commented 2 days ago

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 commented 2 days ago

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 commented 2 days ago

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.