Improve bootstrap5 UX (crowded navigation bar)

[Ilav1]

The problem

I noticed that with bootstrap5 the fields “Expiration time”, ‘Password’ and “Format” are barely readable on smaller displays (width <1600 px). I think this will affect the UX if bootstrap5 is used as the standard theme in the future.

If the display width becomes even smaller (< 1400 px), the settings on the right-hand side (day/night mode, language, theme) are cut off. The field for entering the password is virtually no longer available and recognizable as such.

If the width is <100 px, the burger menu is displayed:

The solution

I don't know to what extent the suggestions can be implemented at all, but my suggestion would be to display the input fields (password, expiration & format) with a fixed width. If the screen width becomes smaller, the settings on the right-hand side (day-nightmode, language & theme) should move to the line below right-aligned (as with the bootsrap theme). If the display becomes even smaller, the other settings follow and also move to the line below (left-aligned). As an example of how it looks with bootstrap when the display width is < 1600 px:

If the display width becomes even smaller < 1400 px:

The burger menu appears at a width < approx. 770 px:

Alternatives

No idea, leave everything as it is :-)

Additional context

[elrido]

It is more of an issue if one enables the off-by-default language and theme menus. And selecting a verbose language like German doesn't help either (the labels are a lot shorter in English or Chinese).

In either template (bootstrap or bootstrap5) enabling these looks bad on smaller screens. Minimum width for password, expiration & format is certainly a good start. An alternative would be to hide some of the lesser used options in a drop-down. But that then requires two clicks to select them, so there is a tradeoff.

[rugk]

To repeat what I said in #1632 …

I agree it's pretty "full".

I would argue against adding another line though, one should not waste vertical space, especially if we consider these buttons not useful anyway.

Another idea would to to introduce an overflow menu aka like the DropDowns, so when space gets too low,

I am not sure Bootstrap offers this, because we also have a too fixed media query breakpoint here that overflows in 1199px width. (And the hamburger button is not shown yet there.)

This is really a point where UI/UX could be improved.

Without bootstrap one could maybe use flexbox tricks there. The current bootstrap docs on this are still quite focused on fixed break points though, which does not work well in our case, when the size of the elements can be so different (depending on options and language).

So any ideas are welcome here!