From Justin:
The rule is 2 lines then truncate with an ellipsis.
Icons should be vertically centre aligned on the top line of the title. Watch out on the icon spacing because we use a small icon button for the edit affordance and a medium one for the ToC button, so you might have to push down the pencil icon a bit to match.
{F71819576}
{F71819578}
(if above images are not visible - find them here)
From Matthias:
Ideally, we’d have a fixed height for that sticky header:
- for technical reasons: a variable-length header makes it hard determine when to swap to a new header as people scroll (calculating the position of all headers for every movement is a too intensive task, so we basically rely on intersection updates at specific points, and adding another variable thing in the mix (that we don’t even know the height of until rendered) significantly complicates that)
- it might also be slightly jarring for users when they’re scrolling to find that the UI suddenly switches to a larger sticky header that then obscures the sentence they were reading near the top of the screen
I’ll fiddle around with this tomorrow to see whether it’s an actual issue or not, but it might be good to think about alternatives just in case.
As for alternatives, the more obvious one would be truncating on a single line.
Or always having a header height enough to accommodate 2 lines, even if it needs only 1.
Or something along the lines of what we’ve currently been working on, where we update the font size if the text doesn’t fit: starting at xx-large, we’ll progressively go down in size until we’re able to fit the text (or truncate it at 2 lines in a small enough font size that fits 2 lines in the smaller header space) - see https://66bd6a1fdc.catalyst.wmcloud.org/wiki/Bernoulli_number?useskin=minerva&mpo=minerva-toc-sticky:treatment&useparsoid=0
I'll fiddle around with this tomorrow = this spike. Let's give it a shot and report back.
QA notes
To test:
- open a page with long headings like enwiki's [[International Space Station]] with ?mpo=minerva-toc-sticky
- ensure all headings either fit on one line or cover 2, with an ellipsis if they would go over
- ensure that the scroll behavior of the sticky header feels as expected when reaching the in-document headers
