WordPress.org
Get WordPress

Make WordPress Core

Opened 4 months ago

Closed 2 months ago

#62380 closed defect (bug) (fixed)

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

Reported by: franciscabusas22's profile franciscabusas22 Owned by: ryelle's profile ryelle
Milestone: 6.7.2 Priority: normal
Severity: minor Version: 6.6
Component: Help/About Keywords: has-patch has-testing-info has-screenshots fixed-major dev-reviewed
Focuses: ui, css Cc:

Description

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

Attachments (3)

Screenshot 2024-11-12 004939.png​ (63.1 KB) - added by franciscabusas22 4 months ago.
see-everything-new-fr-512.png​ (24.4 KB) - added by sabernhardt 4 months ago.
hero link in French, at 512 pixels wide
see-everything-new-fr-800.png​ (44.4 KB) - added by sabernhardt 4 months ago.
hero link in French, at 800 pixels wide

Download all attachments as: .zip

Change History (24)

@franciscabusas22
4 months ago

#1 @desrosj
4 months ago

#62379 was marked as a duplicate.

#2 @desrosj
4 months ago

  • Component changed from General to Help/About
  • Milestone changed from Awaiting Review to 6.7.1
  • Version changed from 6.6.2 to 6.6

#3 @sabernhardt
4 months ago

  • Summary changed from Mobile Responsive: Overlapping Button in WordPress Dashboard to About page: 'See everything new' link can extend outside its container

@sabernhardt
4 months ago

hero link in French, at 512 pixels wide

@sabernhardt
4 months ago

hero link in French, at 800 pixels wide

#4 @sabernhardt
4 months ago

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

This ticket was mentioned in ​PR #7769 on ​WordPress/wordpress-develop by ​@yogeshbhutkar.
4 months ago #5

  • Keywords has-patch added

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

This ticket was mentioned in ​PR #7771 on ​WordPress/wordpress-develop by ​@sainathpoojary.
4 months ago #6

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

#7 @yogeshbhutkar
4 months ago

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.

#8 @jorbin
4 months ago

  • Type changed from enhancement to defect (bug)

This ticket was mentioned in ​Slack in #core by desrosj. ​View the logs.
4 months ago

#10 @desrosj
4 months ago

  • Milestone changed from 6.7.1 to 6.7.2
  • Severity changed from normal to minor

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.

#11 @im3dabasia1
4 months ago

  • Keywords has-testing-info has-screenshots added

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

This ticket was mentioned in ​Slack in #core by jorbin. ​View the logs.
3 months ago

This ticket was mentioned in ​PR #8027 on ​WordPress/wordpress-develop by ​@ryelle.
3 months ago #13

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 https://github.com/user-attachments/assets/eaa31350-d472-485a-ae54-211889f38fec https://github.com/user-attachments/assets/1524dd38-05a3-46be-913f-991676113af5 https://github.com/user-attachments/assets/2010ae41-0ec0-46ae-8108-25d68620fec9
French https://github.com/user-attachments/assets/c0bb8913-017f-44c8-b1af-7d951d3a811a https://github.com/user-attachments/assets/c3a43c6d-dd72-43ad-8820-4a73418878f2 https://github.com/user-attachments/assets/ba1be8be-9d08-4591-b734-6511fd9d69bf
Japanese https://github.com/user-attachments/assets/abdf6380-5300-4016-874d-282f843b65ed https://github.com/user-attachments/assets/b558c69c-e926-4532-b136-dff18c052d2d https://github.com/user-attachments/assets/160d3727-3005-41da-95c9-7b70e713974d
Uighur (RTL) https://github.com/user-attachments/assets/555bdba2-2668-47b8-9d01-255c4e9c2470 https://github.com/user-attachments/assets/92421813-d84a-4b8a-b6df-416f644dba3c https://github.com/user-attachments/assets/4f306150-f8f0-48c8-9548-cb4bb597793c

#14 @ryelle
3 months ago

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

​@audrasjb commented on ​PR #8027:
3 months ago #15

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

#16 @ryelle
2 months ago

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

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.

#17 @ryelle
2 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening to backport [59580] to the 6.7 branch.

#18 @ryelle
2 months ago

  • Keywords dev-feedback added

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

#19 @SergeyBiryukov
2 months ago

  • Keywords dev-reviewed added; dev-feedback removed

[59580] looks good to backport.

#20 @SergeyBiryukov
2 months ago

  • Keywords fixed-major added

#21 @ryelle
2 months ago

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

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.

Note: See TracTickets for help on using tickets.