WordPress.org
Get WordPress

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#58877 closed defect (bug) (fixed)

New image editing screen - buttons overflow in non en_US locales

Reported by: kebbet Owned by: joedolson
Priority: normal Milestone: 6.3
Component: Media Version: 6.3
Severity: normal Keywords: has-patch fixed-major dev-reviewed
Cc: Focuses: ui, css

Description

The new image editing interface has a glitch when using other locales than en_US. The strings are longer in for example sv_SE, which makes the dropdown menu for ”Image rotatation” to overflow.

Attachments (2)

image-editiing-overflow.jpg​ (77.1 KB ) - added by kebbet 3 years ago.
The drop down menu in action, with sv_SE locale
image-editiing-overflow-fixx.jpg​ (82.4 KB ) - added by kebbet 3 years ago.
What the solution in comment 1 looks like.

Download all attachments as: .zip

Change History (19)

@kebbet
3 years ago

The drop down menu in action, with sv_SE locale

#1 @kebbet
3 years ago

A solution can be adjusting the .image-editor .imgedit-menu .imgedit-popup-menu button selector by adding:

white-space: space-break;
line-height: 1.5;

@kebbet
3 years ago

What the solution in comment 1 looks like.

This ticket was mentioned in ​PR #4888 on ​WordPress/wordpress-develop by ​@kebbet.
3 years ago #2

  • Keywords has-patch added; needs-patch removed

https://core.trac.wordpress.org/ticket/58877 Solves the issues present on sv_SE.

#3 @kebbet
3 years ago

  • Keywords needs-testing added

Test instructions

  1. Perform the test on both en_US locale and sv_SE.
  2. Go to edit screen of media item, press button Edit image/Redigera bild.
  3. Click Image rotation/Bildrotation button.
  4. View the buttons in the fly out menu drawer.

Expecations

  • Before and after patch in en_US: The fly out menu buttons do not overflow.
  • Before patch in sv_SE: The buttons in the fly out menu overflows.
  • After patch in sv_SE: The buttons in the fly out menu does not overflow.

#4 @SergeyBiryukov
3 years ago

  • Milestone Awaiting Review → 6.3

#5 @SergeyBiryukov
3 years ago

Thanks for the ticket! Moving to 6.3, as this appears to be introduced in [55919] / #50523.

#6 @joedolson
3 years ago

  • Owner set to joedolson
  • Status new → accepted

Well, I should definitely have caught that. Thanks, @kebbet!

#7 @joedolson
3 years ago

  • Keywords commit added; needs-testing removed

Looks good.

#8 @joedolson
3 years ago

This was actually introduced in [56239] / #58756, which was a follow up to [55919] / #50523. Still introduced in 6.3, though.

#9 @joedolson
3 years ago

  • Resolution → fixed
  • Status accepted → closed

In 56282:

Media: Fix Image rotation button overflow in translations.

Fix CSS to cover the image rotation button action text being longer than the Image Rotation menu toggle. Prevent the button text from overflowing the button. Follow-up to [56239].

Props kebbet.
Fixes #58877.

#10 @joedolson
3 years ago

  • Keywords commit removed
  • Resolution fixed
  • Status closed → reopened

#11 @joedolson
3 years ago

  • Keywords dev-feedback added

Reopening for 2nd committer approval to backport into 6.3.

#13 @joedolson
3 years ago

Hi, @audrasjb! Requesting second committer review for backport to 6.3, when you have a chance.

#14 @audrasjb
3 years ago

  • Keywords fixed-major added

#15 @audrasjb
3 years ago

  • Keywords dev-reviewed added; dev-feedback removed

Thanks for the ping @joedolson.
I sign-off this changeset 👍

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

#17 @audrasjb
3 years ago

  • Resolution → fixed
  • Status reopened → closed

In 56286:

Media: Fix Image rotation button overflow in translations.

Fix CSS to cover the image rotation button action text being longer than the Image Rotation menu toggle. Prevent the button text from overflowing the
button.

Follow-up to [56239].

Props kebbet, joedolson.
Reviewed by audrasjb.
Merges [56282] to the 6.3 branch.
Props kebbet.
Fixes #58877.

Note: See TracTickets for help on using tickets.