Make WordPress Core

Opened 2 months ago

Last modified 2 months ago

#62185 new defect (bug)

Twenty Twenty-One: archive page headings do not wrap long words

Reported by: trushaamin's profile trushaamin Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: needs-patch
Focuses: ui, css Cc:

Description (last modified by sabernhardt)

on Beta development version (6.7-beta1), Theme Twenty Twenty-One Version: 2.3
we can go to the footer search. we can add the words and click on the search button after checking the result.

Attachments (2)

Word break iPad.png (372.3 KB) - added by trushaamin 2 months ago.
Word break Mobile.png (279.6 KB) - added by trushaamin 2 months ago.

Download all attachments as: .zip

Change History (6)

This ticket was mentioned in PR #7523 on WordPress/wordpress-develop by @veryard.


2 months ago
#1

  • Keywords has-patch added; needs-patch removed

Fixes the search term not breaking on smaller screens. Can switch this to be break-all if that is preferred.

#2 @veryard
2 months ago

  • Keywords needs-patch added; has-patch removed
  • Summary changed from Theme Twenty Twenty-TwoVersion: 1.8, text not show. to Theme Twenty Twenty-One Version: 1.8, text not show.

I have made a PR to resolve this, just simple adding word-break on the .search-term class.

Thanks

Version 1, edited 2 months ago by veryard (previous) (next) (diff)

#3 follow-up: @sabernhardt
2 months ago

  • Description modified (diff)
  • Milestone changed from Awaiting Review to Future Release
  • Summary changed from Theme Twenty Twenty-One Version: 1.8, text not show. to Twenty Twenty-One: archive page headings do not wrap long words

Twenty Twenty-One uses overflow-wrap: break-word for post/page headings with the .entry-title class (entry.scss).

For archive pages such as search results, the heading has a .page-title class. That class probably should have the same overflow-wrap rule (archives.scss).

Note: Patches for Twenty Twenty-One need to update the SCSS file(s), and then CSS files are compiled from them.

#4 in reply to: ↑ 3 @veryard
2 months ago

Replying to sabernhardt:

Twenty Twenty-One uses overflow-wrap: break-word for post/page headings with the .entry-title class (entry.scss).

For archive pages such as search results, the heading has a .page-title class. That class probably should have the same overflow-wrap rule (archives.scss).

Note: Patches for Twenty Twenty-One need to update the SCSS file(s), and then CSS files are compiled from them.

Thanks for pointing this out, must have been a late night when I made that change! I have gone ahead and updated the commit and included the change in the appropriate scss file.

Thanks!

Note: See TracTickets for help on using tickets.