Make WordPress Core

#58877 closed defect (bug) (fixed)

New image editing screen - buttons overflow in non en_US locales

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

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 17 months ago.
The drop down menu in action, with sv_SE locale
image-editiing-overflow-fixx.jpg (82.4 KB) - added by kebbet 17 months ago.
What the solution in comment 1 looks like.

Download all attachments as: .zip

Change History (19)

@kebbet
17 months ago

The drop down menu in action, with sv_SE locale

#1 @kebbet
17 months 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
17 months ago

What the solution in comment 1 looks like.

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


17 months 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
17 months 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
17 months ago

  • Milestone changed from Awaiting Review to 6.3

#5 @SergeyBiryukov
17 months ago

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

#6 @joedolson
17 months ago

  • Owner set to joedolson
  • Status changed from new to accepted

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

#7 @joedolson
17 months ago

  • Keywords commit added; needs-testing removed

Looks good.

#8 @joedolson
17 months ago

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

#9 @joedolson
17 months ago

  • Resolution set to fixed
  • Status changed from accepted to 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
17 months ago

  • Keywords commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

#11 @joedolson
17 months ago

  • Keywords dev-feedback added

Reopening for 2nd committer approval to backport into 6.3.

#13 @joedolson
17 months ago

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

#14 @audrasjb
17 months ago

  • Keywords fixed-major added

#15 @audrasjb
17 months 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.


17 months ago

#17 @audrasjb
17 months ago

  • Resolution set to fixed
  • Status changed from reopened to 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.