Page MenuHomePhabricator

Content pushed down by a large amount in Timeless
Closed, ResolvedPublic

Description

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.

Event Timeline

Reedy renamed this task from [Regression] Content pushed down by a large amount in Timeless to Content pushed down by a large amount in Timeless.Nov 25 2017, 1:44 PM

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

https://gerrit.wikimedia.org/r/393434

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://gerrit.wikimedia.org/r/393434

@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.

No, we should totally tell the wikipedias to do that. :D

I mean, I'm sold. overflow: hidden sounds good to me.

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.

I'd really support an approach like this.