About page: 'See everything new' link can extend outside its container

[franciscabusas22]

Mobile View Issue: The button is overlapping in parent container in Brave browser.

[desrosj]

#62379 was marked as a duplicate.

[sabernhardt]

hero link in French, at 512 pixels wide

[sabernhardt]

hero link in French, at 800 pixels wide

[sabernhardt]

The default English 'hero' link is 280 pixels wide (with Segoe UI in Windows). Other languages can be even wider:

• ​Tamil (573px) எல்லாவற்றையும் புதிதாகப் பாருங்கள்
• Malayalam (461px) എല്ലാം പുതിയതായി കാണുക
• French (422px) Découvrez toutes les nouveautés

Trac ticket: https://core.trac.wordpress.org/ticket/62380

This PR addresses the issue of button text overlapping in mobile view About page. The following responsive styles have been added for a viewport width of 782px or less:

• Set text-wrap: balance for optimal text distribution
• Adjust line-height to 1.7
• Configure dynamic padding using --gap variable
• Update max-width properties

Preview after fixing:

​https://github.com/user-attachments/assets/656a6b42-8ce3-4e97-bec0-dd5173337e20

​https://github.com/user-attachments/assets/5811c8da-58e2-46dc-bf5c-e39efa38dfc7

Trac ticket: #62380

[yogeshbhutkar]

I've added a patch fixing the link on mobile and tablet devices and attached screenshots of it in the PR. It's been tested for all the locales mentioned above and is found to render the link appropriately.

[desrosj]

Because of a few bug reports opened since 6.7 was released, the Core team is evaluating the need for a short 6.7.1 cycle (possibly next week).

To help prepare for this scenario in case it's decided to move forward, I'm going to punt this to the 6.7.2 milestone. This issue was not introduced in 6.7, so it now falls outside of the focus for 6.7.1 as currently defined.

[im3dabasia1]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/7769.diff

Environment

• WordPress: 6.7.1
• PHP: 8.1.29
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.29)
• Browser: Chrome 129.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.0
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0
  • WordPress Beta Tester 3.6.1

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

• Tested the patch in Safari, Chrome and Brave

Supplemental Artifacts

Brave: ​https://postimg.cc/gnzkjvDs
Safari: ​https://postimg.cc/RWqSQ42n
Chrome: ​https://postimg.cc/56s9C6KV

On some screen sizes and languages, the "See everything new" button expands out of the content area. This change allows the button to wrap at all screen sizes.

This pulls CSS from both #7769 and #7771, the changes I made were to fix some padding, and apply to all screen sizes.

Trac ticket: https://core.trac.wordpress.org/ticket/62380

Screenshots

	1200px	800px	400px
English
French
Japanese
Uighur (RTL)

Thanks @ryelle I can confirm this changeset solves the issue in fr_FR 👍
​5e479dce-183e-4086-aaff-a6294403d8d3.webm

[ryelle]

In 59580:

Help/About: Allow "See everything new" button to wrap

On some screen sizes and languages, the "See everything new" button expands out of the content area. This change allows the button to wrap at all screen sizes, and updates the style of this button for wrapped text.

Props franciscabusas22, sabernhardt, yogeshbhutka, sainathpoojary, im3dabasia1, audrasjb.
Fixes #62380.

[ryelle]

Reopening to backport [59580] to the 6.7 branch.

[ryelle]

Adding dev-feedback for the backport ​per these instructions.

[SergeyBiryukov]

[59580] looks good to backport.

[ryelle]

In 59581:

Help/About: Allow "See everything new" button to wrap

On some screen sizes and languages, the "See everything new" button expands out of the content area. This change allows the button to wrap at all screen sizes, and updates the style of this button for wrapped text.

Reviewed by SergeyBiryukov.
Merges [59580] to the 6.7 branch.

Props franciscabusas22, sabernhardt, yogeshbhutka, sainathpoojary, im3dabasia1, audrasjb.
Fixes #62380.