try Gutenberg header wraps over text below on narrow screens

[fierevere]

"Test the new editor today" can wrap over text below on narrow screens

Russian translation, screen width 1366 px

english, narrowed screen

browser: Firefox 61

wp-4.9.8-beta1-43507

[johnbillion]

Thanks for the report!

[pbiron]

english, narrowed screen browser: Firefox 57 wp-4.9.8-beta1-43509

[pbiron]

appears to have something to do with the default font in FF 61, because it looks fine for me in FF 57 (and Chrome 67).

[fierevere]

default wp-admin font (Segoe UI bold)
Russian translation

Unable to reproduce with any screen width with english user language and default font

I ve shortened russian translation a bit, lets see after language pack update if i can reproduce the problem.
But keep in mind that some locales may offer longer translation and there is no comment for translators to limit translation string length.

[fierevere]

still looks bad with localized string with some (not all) widths
Screen ruler in pixels below.

[fierevere]

reproducible:
Firefox 52 ESR (Linux)
Firefox 61 (Linux and Windows)
Vivaldi 1.15.1147.52 (Linux)
by narrowing browser window (see ruler on screenshot above)

[earnjam]

This is because it's using display:grid on the containing element and then setting a fixed height of 45px on the first row item with grid-template-rows: 45px auto 100px; It's going to happen anytime the text needs to wrap, regardless of browser.

It looks like it's fine in English because the text is short enough that it hits breakpoints before the container gets small enough to require wrapping, but some of the translations are longer, so they wrap and overlap.

[stino11]

@earnjam Has the right idea. The fix should be

    grid-template-rows: auto 1fr 100px;

• auto lets the first grid row expand to fit its content
• 1fr lets the second grid row expand to fit the remaining available space
• 100px fixes the height of the third grid row

[earnjam]

Other option is to wrap the <h3> and the <p> in a <div> and change that line to grid-template-rows: auto 100px though that does add some extraneous markup.

[earnjam]

44611.diff​ Takes the method I suggested above of wrapping in a div because it allows the buttons to remain at the bottom of the column container per the current design.

[pento]

Thanks for the patch, @earnjam!

@kjellr: How does this look to you?

[fierevere]

after applying patch.
English looks same - misplaced overlapping buttons
The title - it does not overlap anymore, but it can be shortened to Попробуйте новый (Try new), cutting out everything that comes after редактор сегодня (editor today)

[earnjam]

@fierevere Can you do a hard refresh and test again? I think the CSS might be cached in your browser.

[kjellr]

@kjellr: How does this look to you?

Looks good to me. 👍

[psykro]

@fierevere have you been able to verify whether clearing your cache resolves the issue?

[pbiron]

the patch does seem to address the wrapping issue.

I have 2 minor suggestions:

• the line-height on the header is currently 2.1 (inherited from .try-gutenberg-panel)
  • I think it would look better with something around 1.3
• when the header wraps, the paragraphs of text do not vertically align. that is not a major problem, IMHO, but would look better if they did
  • I tried to figure out how to achieve that, but was unable to

Failure to implement those suggestions should not stop us from including this in 4.9.8 RC (which goes out tomorrow).

[kjellr]

Replying to pbiron:

I have 2 minor suggestions:

• the line-height on the header is currently 2.1 (inherited from .try-gutenberg-panel)
  • I think it would look better with something around 1.3
• when the header wraps, the paragraphs of text do not vertically align. that is not a major problem, IMHO, but would look better if they did
  • I tried to figure out how to achieve that, but was unable to

Agreed on that first point, though I'd personally suggest 1.4 for the line height. I think it's alright if the paragraphs don't align when the header spans two (or more) lines.

In any case though, these can be addressed in a separate issue and shouldn't be blockers for this ticket.

[pbiron]

Related: #44627

[pento]

In 43523:

Dashboard: Improve "Try Gutenberg" subheading appearance for long headings.

When translated, the callout subheadings can wrap onto a new line, which caused them to overlap the paragraph text.

Props earnjam, fierevere.
Fixes #44611.