Page MenuHomePhabricator

Minerva ToC layout broken in higher screen resolutions
Closed, ResolvedPublicBUG REPORT

Description

I was looking at WP:ANI on my iPad and noticed that the ToC is having some problems.

  • The icons overlap with the elements of the TOC. The .toctitle element doesn't have enough height. The mw-ui-icons inside it are positioned absolute, kicking them out of the height calculation of the element. This then falls back to the h2#mw-toc-heading height, which is not high enough.

Screenshot 2021-10-02 at 14.10.27.png (586×942 px, 99 KB)

Screenshot 2021-10-02 at 14.10.54.png (468×814 px, 88 KB)

Screenshot 2021-10-02 at 14.10.40.png (490×766 px, 84 KB)

  • another problem is an overflow of the viewport overflow. The ToC is a table element and for some reason the ul inside it has a 22.85714286em margin on the right, guaranteeing overflows... In this case there was a very long link in the ToC. The link width + 22em right margin cause viewport overflow. First of all, this clearly shows a use for "word-break: break-word;

Screenshot 2021-10-02 at 14.17.21.png (316×1 px, 74 KB)

But that right margin is also strange. That's a LOT. The definition for that margin is unit( @icon-glyph-size-md / @font-size-minerva-small, em ), where icon-glyph-size-md == 20 and font-size-minerva-small defined as unit( 14 / @font-size-browser, rem ) I suspect the mixed units (introduced in Ib578f2cc4597b4dbfb5d1f5e4842962433af3748, T282315) are perhaps the problem ?

Event Timeline

Change 725426 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/skins/MinervaNeue@master] [WIP] Try to rework the minerva ToC a bit

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

Ugh i tried to work on this a bit, but this entire set of CSS is a bit of a mess.

First of all, I just can't reverse engineer what the original design idea was any longer. What margins should go where etc.. Does anyone have links for original design plans ?

Second, like stated, it uses absolute positioning for the icons. Probably because they get inserted by JS. I tried replacing this with flexbox (with inline-block fallback), which worked very well.... But it needs the dimensions of the icon for some weird reason. As if the CSS is loaded after the icon is inserted? Also are there less variables for the dimensions of these icons ? I couldn't find them.

I have no idea why some styling is inside .client-js and other styling is not. It just makes no sense... I'd think that either you'd just put the 'collapsible' and 'force to show' related code inside the .client-js blocks, or just everything.
Can i rework this or is there a specific reason it is so ?

Aklapper renamed this task from Minverva ToC layout broken in higher screen resolutions to Minerva ToC layout broken in higher screen resolutions.Oct 2 2021, 4:34 PM

But that right margin is also strange. That's a LOT.

Yeh that right margin looks like a bug with units. it's supposed to make sure the right menu doesn't appear underneath the collapse icon in the top right corner.

Ugh i tried to work on this a bit, but this entire set of CSS is a bit of a mess.

The code is definitely a mess. Originally Minerva had a bespoke table of contents and it was adjusted to style the desktop one differently. If I was working on it now, I'd be making slight tweaks to the core code (and possibly desktop design) to support the mobile behaviour which is different in that:

  • heading has an icon
  • it's collapsed by default
  • a collapse icon is used instead of "hide" text.

First of all, I just can't reverse engineer what the original design idea was any longer. What margins should go where etc.. Does anyone have links for original design plans ?

I couldn't dig one out it's too old. @alexhollender does anything exist on the designer side?

I have no idea why some styling is inside .client-js and other styling is not. It just makes no sense... I'd think that either you'd just put the 'collapsible' and 'force to show' related code inside the .client-js blocks, or just everything.

I think the point of this is to make sure the table of contents is collapsed by default for JS users, but not for non-JS users (so that' it's usable)

But it needs the dimensions of the icon for some weird reason. As if the CSS is loaded after the icon is inserted?

This is possible. The icon is added via JS with a note to upstream this to the parser:
https://gerrit.wikimedia.org/g/mediawiki/skins/MinervaNeue/+/3e93b189f467e8265df5faf39232ae149cff0b15/resources/skins.minerva.scripts/initMobile.js#400

It would likely be better to simply style the header if possible.

Also are there less variables for the dimensions of these icons ? I couldn't find them.

Nothing standard yet :-(. Getting there slowly. The icon variables can be found in resources/src/mediawiki.ui/components/icons-2.less

I've been using the Way Back Machine lately to figure out how things used to look. Here is a screenshot from January 3, 2020 (link):

Screen Shot 2021-10-04 at 3.45.09 PM.png (699×1 px, 242 KB)

improved the patch a bit. should be a lot better now

Change 725426 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Rework the Minerva ToC

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