Make WordPress Core

Opened 5 years ago

Last modified 12 days ago

#46048 new defect (bug)

Twenty Nineteen: Latest posts block: Post title overlaps other titles on certain screen widths

Reported by: arunsathiya's profile arunsathiya Owned by:
Milestone: 6.6 Priority: normal
Severity: normal Version: 5.0.3
Component: Bundled Theme Keywords: has-screenshots has-patch dev-feedback
Focuses: ui Cc:

Description

Affects: Only Twenty Nineteen. Does not affect other core themes like Twenty Seventeen or Twenty Sixteen.

On certain screen widths, with the "Latest posts" Gutenberg block, the long post title overlaps with the nearby titles. This seems to happen only for titles having characters like "/" on it, at the end. I haven't been able to see if this is the case with other special characters.

The attached images can help understand this better.

Video https://cloudup.com/c2G8sjrlp1b showing that this is not affected with other themes like Twenty Seventeen.

Attachments (5)

Screenshot 2019-01-21 at 21.18.01.png (144.3 KB) - added by arunsathiya 5 years ago.
Title overlapping with other titles on "Latest posts" Gutenberg block with Twenty Nineteen
Screenshot 2019-01-21 at 21.18.08.png (184.5 KB) - added by arunsathiya 5 years ago.
Title overlapping with other titles on "Latest posts" Gutenberg block with Twenty Nineteen
46048.patch (1.9 KB) - added by mukesh27 5 years ago.
Patch.
SCR-20240403-qtgi.png (102.5 KB) - added by karmatosed 12 days ago.
Without patch
SCR-20240403-qtja.png (97.0 KB) - added by karmatosed 12 days ago.
With patch

Download all attachments as: .zip

Change History (11)

@arunsathiya
5 years ago

Title overlapping with other titles on "Latest posts" Gutenberg block with Twenty Nineteen

@arunsathiya
5 years ago

Title overlapping with other titles on "Latest posts" Gutenberg block with Twenty Nineteen

#1 @mukesh27
5 years ago

  • Focuses ui added
  • Keywords has-screenshots has-patch ui-feedback added

Hi @arunsathiya, Welcome to WordPres Trac! Thanks for the report.

i also replicate same issue in my setup when string is longer without space, So need to add word-break: break-word; in grid layout CSS.

@mukesh27
5 years ago

Patch.

#2 @laurelfulford
5 years ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to Future Release

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


4 years ago

#4 @nrqsnchz
4 years ago

  • Keywords ui-feedback removed

Removing the ui-feedback label since this is only a visual bug.

#5 @karmatosed
12 days ago

  • Keywords commit added; needs-testing removed
  • Milestone changed from Future Release to 6.6

In testing this does resolve it for me so moving this to recommend commit and also next version, thank you.

@karmatosed
12 days ago

Without patch

@karmatosed
12 days ago

With patch

#6 @karmatosed
12 days ago

  • Keywords dev-feedback added; commit removed

Whilst this patch does fix it I am going to add second opinion as in two-minds about using 'break-word' due to deprecation. We could use 'overflow-wrap: anywhere' but that doesn't work for Safari older versions.

I do know that break-word is used in other themes so for now I am curious what approaches others would take here. Let's get some opinions into this ticket for feedback.

Note: See TracTickets for help on using tickets.