When using browser's zoom-in feature on a wikipedia page, for example Wikipedia, under the new design, a horizontal scroll bar will appear due to overflow.
This is less a problem if you stick with 100% zoom level on a 16:9 screen, but it can cause some issues on vertical monitors and when you zoom in, which is a feature people frequently use because the default font size of wikipedia is fairly small.
Steps to Reproduce:
- My setup is 1920x1080 screen Linux, and Firefox
- Open https://en.wikipedia.org/wiki/Wikipedia using the new layout
- Press Ctrl-+ until the zoom level is 200%.
Actual Results:
Notice the horizontal scroll bar at the very bottom. The top navigation bar also does not seem to fit even though there are spaces to the left.
Expected Results:
No horizontal scroll bar, at least at 200% zoom level, similar to the original design.
You can also notice the same problem using the responsive design mode in Firefox (press F12 and click the phone/tablet icon). The horizontal overflow occurs at 1005px, which is more than 200px higher than the original design (799px). Do not use Chrome's device toolbar to test this, as I noticed Chrome does not appear to display horizontal overflow properly.