Make WordPress Core

Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#42526 closed defect (bug) (fixed)

About: Columns width jumps

Reported by: kebbet's profile kebbet Owned by: westonruter's profile westonruter
Milestone: 4.9 Priority: normal
Severity: normal Version: 4.9
Component: Help/About Keywords: has-patch dev-reviewed commit
Focuses: ui, administration Cc:


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.

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

Attachments (3)

42526.diff (6.4 KB) - added by ryelle 7 years ago.
screenshot.png (368.5 KB) - added by ryelle 7 years ago.
42526.2.diff (6.7 KB) - added by ryelle 7 years ago.

Download all attachments as: .zip

Change History (14)

#1 @ocean90
7 years ago

  • Focuses ui added
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.9
  • Version changed from trunk to 4.9

Related: #42514

#2 @melchoyce
7 years ago

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

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.

7 years ago

#4 @jbpaul17
7 years ago

  • Owner set to ryelle
  • Status changed from new to assigned

7 years ago

7 years ago

#5 @ryelle
7 years ago

  • Keywords has-patch added; needs-patch removed

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 :)

#6 @melchoyce
7 years ago

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

#7 @helen
7 years ago

  • Keywords dev-reviewed commit added

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.

7 years ago

#8 @ryelle
7 years ago

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

#9 @westonruter
7 years ago

  • Owner changed from ryelle to westonruter
  • Status changed from assigned to accepted

#10 @westonruter
7 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 42173:

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

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

#11 @westonruter
7 years ago

In 42174:

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

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

Note: See TracTickets for help on using tickets.