Page MenuHomePhabricator

Zebra: long table of contents overlaps footer
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

What happens?:
Table of contents overlaps the footer

Screenshot 2023-05-31 at 23-22-43 Wikipedia Village pump (idea lab) - Wikipedia.png (812×1 px, 350 KB)

What should have happened instead?:
Table of contents should not overlap the footer. Compare with the non-Zebra variant:

Screenshot 2023-05-31 at 23-22-58 Wikipedia Village pump (idea lab) - Wikipedia.png (812×1 px, 337 KB)

Other information (browser name/version, screenshots, etc.): Tested with same results in Chrome and Firefox

Event Timeline

LGoto set the point value for this task to 3.Jul 6 2023, 5:38 PM

This is due to the pinnable element CSS refactoring that @Jdrewniak and I did as part of Zebra, this moved the position: sticky up one element in the DOM to .mw-table-of-contents-container. Rather than undo that refactoring and make the markup/styles for pinnable elements inconsistent again, the solution we discussed was to add a .vector-column-start container to .mw-page-container-inner, that would contain the TOC and main menu pinned elements. This mirrors the structure for the existing .vector-column-end container, and would allow us to simplify our CSS grid styles.