Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect top bar button wrap on medium widths #5746

Closed
quincylvania opened this issue Jan 22, 2019 · 2 comments
Closed

Incorrect top bar button wrap on medium widths #5746

quincylvania opened this issue Jan 22, 2019 · 2 comments
Assignees
Labels
bug A bug - let's fix this!

Comments

@quincylvania
Copy link
Collaborator

quincylvania commented Jan 22, 2019

On narrow widths, the top bar buttons hide their labels and just show their icons. On medium widths, the text unexpectedly wraps. This produces a janky and undesirable result:

screen shot 2019-01-22 at 9 17 07 am

The labels should be hidden instead.

@quincylvania quincylvania added the bug A bug - let's fix this! label Jan 22, 2019
@bhousel
Copy link
Member

bhousel commented Jan 22, 2019

Yeah I noticed this a few times too... What's really supposed to happen is that the labels go away.

The buggy code is in here - probably because whatever browser is not calculating the widths correctly, or caching incorrectly whatever it thinks is the _needWidth value.

We can't really use a media query like I originally thought - because the header width depends on the width of the map, which depends on the width of the sidebar, not the width of the window.

@quincylvania quincylvania self-assigned this Jan 22, 2019
@quincylvania quincylvania added the wip Work in progress label Jan 22, 2019
@quincylvania
Copy link
Collaborator Author

@bhousel Thanks for pointing to the code! The issue was that when the buttons wrapped, they weren't contributing enough to the bar's scrollWidth property to trigger the class change. white-space: nowrap; fixed it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug A bug - let's fix this!
Projects
None yet
Development

No branches or pull requests

2 participants