I can't reproduce in production, but I can on beta, so this is a recent regression, and a very bad one:
On https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page?useskin=timeless (or any other page in Timeless skin), in desktop mode (= screen wide enough to show 2 or 3 columns) there is a huge gap between title and tabs, and between tabs and content. Huge here means for me: All the stuff is below the fold.
Description
Details
Event Timeline
Change 393434 had a related patch set uploaded (by Isarra; owner: Isarra):
[mediawiki/skins/Timeless@master] Put back stupid horrible overflow:auto to keep sidebars from shoving down all content
Change 393434 merged by jenkins-bot:
[mediawiki/skins/Timeless@master] Put back stupid horrible overflow:auto to keep sidebars from shoving down all content
https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page?useskin=timeless looks good to me now.
@Isarra why overflow:auto and not overflow:hidden ?
This overflow auto creates an enormous and hard to detect scrolling surface if some of the content is not responsive... Overflow hidden would achieve the same effect with no scrollbar side effects (which is why we also use it for section headers).
Overflow:hidden results in the overflowing content being just... gone, though. Which means if you have a too-big table, it can't even be accessed.
Is there a better way around this? Can the content be made to expand as needed without messing up/getting messed up by the sidebars?
Not really. The official css viewpoint on this is to author your content to take this into account. but of course we cant, because our users author tables, not the developers.
On mobile we make the tables scrollable, but that is far from ideal as well.
Ive tried playing with JS a couple of times, to detect when an element is overflowing, and then apply css and classes to make the table scrollable. There might be some value in that, but i never really got as far as making patches for it.