DOC avoid version switcher dropdown being cut off by right boundary #30581
Conversation
There was a problem hiding this comment.
I couldn’t reproduce the cut-off shown in the screenshot, after viewing the documentation in Firefox, Microsoft Edge, and Chrome:
Firefox (170% Zoom)
| Current | PR |
|---|---|
 |
 |
Microsoft Edge (175% Zoom)
| Current | PR |
|---|---|
 |
 |
Chrome (175% Zoom)
| Current | PR |
|---|---|
 |
 |
However, I did notice that the PR’s implementation shifts the navigation bar from horizontal to vertical, as observed in Edge and Chrome.
Perhaps I’m missing an important detail here?
|
@virchan Thanks for the review - I should have made things clearer: You need to choose a non stable or dev version because their labels are shorter than the stable and dev versions, in which case the dropdown menu will expand out of the screen. In other words this PR will make a noticeable difference only after 1.7.X becomes a non stable or dev version, unless backported to 1.5.X and 1.6.X as well. |
There was a problem hiding this comment.
Thanks for the clarification, @Charlie-XIAO! It's really helpful! I can see the cut-off when viewing the document online in version 1.5.2.
Thank for fixing it as well!
virchan
added
the
Waiting for Second Reviewer
| .version-switcher__menu { | ||
| // The version switcher is aligned right so we need to avoid the dropdown menu | ||
| // to be cut off by the right boundary | ||
| left: unset; |
There was a problem hiding this comment.
Is left: unset required here?
| left: unset; |
In chrome, I see that it gets set to left: 0 anyways:
There was a problem hiding this comment.
@thomasjpfan Thanks for pointing out - the unset is needed, but indeed the selector was not strong enough. 07ff721 hopefully fixes it.
And just for reference, this is the desired effect:
not this (because long labels will not have enough space in the dropdown if selecting a short label):
or this (the original, because the long labels will go out of the right boundary of the screen if selecting a short label):
See the screenshot:
The dropdown menu is cut off because it is aligned to the left boundary with
left: 0. With this PR it will be aligned to the right boundary withright: 0.