pkgdown
pkgdown copied to clipboard
r-lib
Page width is larger than viewport width on mobile
On devices with narrower screens, the page width is larger than the viewport resulting in a user being able to scroll horizontally, which is unwanted, generally. From my inspection, this is due to the aside class putting extra margins around and even though there is width: calc(100wv - 1rem) to compensate, this is "deactivated" by the .row which has width: 100%. You can see it at https://pkgdown.r-lib.org/, for instance.
Note that this issue cannot be replicated on pages using {tidytemplate}, such as https://rstudio.github.io/shinytest2/.
Thank you for the bug report @netique! Would you mind adding screenshots to the issue? (I think I am not looking at the correct part of the page / at the correct behavior) Thanks, and no worries if you can't.
Noting http://crumplab.com/reference/index.html is an example with a too wide navbar (might be another issue though)
Sure, here is a demo of the behaviour.
You can see it quite easily on the code chunk (it is supposed to fill the viewport width 100% so horizontal scrolling is not possible).
Here is the behaviour when I disable the margin in the aside class:
The website you mentioned works great (you cannot scroll horizontally), as there is no object of class aside used.
Fun terminology: this is called a scrollburglar.
Looks like the root cause is I sets the width of an aside to calc(100vw - 1rem), ensuring that there's enough room for the margin. But bootstrap's .row > * override the width to 100%. So I think I just need to get a bit more specific here.
