-
Notifications
You must be signed in to change notification settings - Fork 0
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
Fix overflowing navbar without max-height. #1
Conversation
Your changes are almost all good. So the current issues are: The "double" border (as you mentioned already): When the minimum font size is bigger and you reduce the width of the window, a scrollbar appears (the one I fixed with And the input is not at the right size (but that's easy to fix): |
I was able to reproduce this on docs.rs today, so I don't think it's an issue specific to this PR. The problem is that The fix is to remove |
I think the real issue here is there's too much stuff in the navbar to fit horizontally. We normally fix that by switching to icons when the screen gets narrow enough. The "narrow enough" cutoff is probably incorrect for the amount of stuff we have, particularly when the font size is big. Also, a long crate name might blow away our "narrow enough" cutoff anyhow.
Looks like the media queries are at least specified in |
Unfortunately, CSS doesn't have something like "if all items cannot be put on the same line, hide the titles". It's so frustrating... This is why I picked the |
Right, but the issue you are seeing (horizontal scrollbar when the font size is too big) isn't just a problem of the search box. That's just the first offender. If I turn the minimum font size even higher in Firefox, more of the navbar overflows: I think in that situation, if we can't auto-convert to icons, we should have a horizontal scrollbar. It's ugly, but it fills the need to actually see the whole navbar. At any rate, I think solving the horizontal scrollbar issue shouldn't be a blocker for rust-lang#1719 (review) because it's not part of the recent regression (and a proper fix will be moderately challenging to find). |
It's the same issue. Notice that the "Rust" menu has completely disappeared in your screenshot. |
I didn't even notice. 🤣 |
So what do we do about these issues? Do we overlook them since this is already an improvement? |
This is new, we should try and fix before landing.
This happens a little less after e3220ff, but we should say this is okay for now and do a more complete fix later.
I'll try and fix this next. |
Thanks! Once done, I'll merge into my PR and I guess we'll be good to go! :) |
templates/style/_navbar.scss
Outdated
display: flex; | ||
flex-direction: row; | ||
|
||
#search-input-nav { | ||
display: none; | ||
border-left: 1px solid var(--color-border); | ||
height: 100%; | ||
height: calc(#{$top-navbar-height} - 1px); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's what I originally wanted to remove by using height: 100%
and position: relative
. Is there a "best way" between the two maybe?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hm, yeah, maybe height: 100% is the right thing after all. Lemme go back to the drawing board on this one.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just to be clear: this is fine for me. It's just that I thought using height: 100%
was the good practice. If it's not then it's completely fine. :)
By the way I found another problem with your original PR: if you scroll the page, the topbar goes away, instead of staying in place. I think that's because of the "position: relative". |
Arf, it's a pretty bad one. I can't wait for the GUI tests to finally be added... Great catch in any case! |
Okay, I think this version fixes things pretty elegantly. It removes the I removed the |
The problem with padding expressed in |
Why is it a problem for the padding to increase with font size?
|
Because you see less of the text. It's bit weird to handle it like this whereas the size of the navbar is expressed in |
Okay, I've updated the padding to be expressed in |
Thanks a lot! I think we fixed all issues so let's merge it then! |
This follows up my proposed changes in rust-lang#1719 (review).
Rather than put
height
andmax-height
properties on various things, we put a singleheight
property on the on textual element that is overflowing, and calculate it the same way as the overall navbar height. This looks good on Chrome and Firefox in my local testing, but please try it yourself and let me know what you see.I think this is somewhat tidier than the original approach.
There's one slight visual problem: since I moved border-left onto
div.nav-container .pure-menu-item > .pure-menu-link:first-child
, it's also applying to links inside the dropdown menus. So the dropdown menus wind up having 2px of border on the left instead of 1. But I think this can be fixed with some small tweaking.