Bad visual top bar on some screen size

[PeopleInside]

Hi, please see: https://discuss.flarum.org/d/24178-top-bar-issue-on-some-windows-size
Seems this extension is causing that issue.

[clarkwinkelmann]

I seem to remember we had another issue about this, but I can't find it.

I see two solutions:

• Either Flarum should allow for variable width in header through CSS, which would create a horizontal slider. I'd argue this CSS should be shipped in Flarum itself, so that any extension adding stuff there won't break the header
• We should move additional links into a dropdown when there's not enough space

Solution 2 would be ideal, but it's not easy to implement. The available width isn't fixed. It depends not only on the browser viewport size, but also the username length! So we would need to implement an automatic calculation for which link should be the last link before a dropdown.

And all of this is assuming there's nothing else in the header. What if another extension adds something else. If that other extension also dynamically calculates the required width, we will end up with something that jumps around. We'd need something standardized in Flarum to manage the space between all extensions that want to add something.

The only "solution" for now is to simply not insert too many links, or shorten the labels. I believe we have since introduced the ability to create dropdowns manually, so that's an easy way to group links to reduce horizontal size.

Not really the same, but related https://github.com/flarum/core/issues/1475

[Hona]

I'm having the same issue, is there some way to make it auto collapse at a wider width?

[frie]

I seem to remember we had another issue about this, but I can't find it.

I see two solutions:

• Either Flarum should allow for variable width in header through CSS, which would create a horizontal slider. I'd argue this CSS should be shipped in Flarum itself, so that any extension adding stuff there won't break the header
• We should move additional links into a dropdown when there's not enough space

Solution 2 would be ideal, but it's not easy to implement. The available width isn't fixed. It depends not only on the browser viewport size, but also the username length! So we would need to implement an automatic calculation for which link should be the last link before a dropdown.

And all of this is assuming there's nothing else in the header. What if another extension adds something else. If that other extension also dynamically calculates the required width, we will end up with something that jumps around. We'd need something standardized in Flarum to manage the space between all extensions that want to add something.

The only "solution" for now is to simply not insert too many links, or shorten the labels. I believe we have since introduced the ability to create dropdowns manually, so that's an easy way to group links to reduce horizontal size.

Not really the same, but related flarum/core#1475

A less automatic solution would be to give the choice to the admin: optionally display the links in a dropdown menu. I added some custom css - my site looks better now than before, but not as perfect as I would like. A styling bundled with the extension probably will much better than some css I have to fiddle together myself.