About: Columns width jumps

[kebbet]

When browsing the new about-page with Swedish translation, the widths of the columns are jumping, and the header is floating over the body text. This makes the experience of browsing the page quite messy.

Maybe it's a translation thing, but I think the design should encounter for headings with long words.

See video of the behavior.
​https://imgur.com/a/dUiJE

Using Chrome, macOS X, WP 4.9-RC2-42158

[ocean90]

Related: #42514

[melchoyce]

Two ideas:

1. Break up long words into multiple lines using hyphenation
2. See if it's possible to display long words in a single row, undocked, above the content columns

[ryelle]

42526.diff​ handles this by switching the layout for sections with longer titles to display above the content - @melchoyce's second option in her comment. You can see it in the screenshot above (screenshot.png​).

This also addresses the issue in #42514 by docking the title to the bottom of the section when scrolled to the end of a section, naturally scrolling it out of view (rather than having it jump back to the top). it also makes scrolling back up the page seem smoother :)

[melchoyce]

Looks good in Chrome, Firefox, and Safari. 👍 Works better for #42514 for sure.

@kebbet If you're able, would you mind testing this patch? 42526.diff​

[helen]

Good call on docking to the bottom, it's a little odd to me that the columns align to the left when there's a long title but I'm not sure if it's actually weird or if it's just that I'm scrolling around more than an actual reader would. 42526.diff​ looks good to me.

[ryelle]

42526.2.diff​ fixes the issue raised by @melchoyce that long titles don't wrap on small screens ​link to slack comment.

[westonruter]

In 42173:

About: Fix jumping behavior for titles and columns when scrolling.

Props ryelle.
See #42087.
Fixes #42514, #42526.

[westonruter]

In 42174:

About: Fix jumping behavior for titles and columns when scrolling.

Props ryelle.
See #42087.
Fixes #42514, #42526 for 4.9.