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.
- 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;
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 ?
