Make WordPress Core

Opened 3 years ago

Last modified 3 years ago

#53229 accepted defect (bug)

"Alt Text" label misaligned in French

Reported by: sebastienserre's profile sebastienserre Owned by: audrasjb's profile audrasjb
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Gallery Keywords: has-patch
Focuses: css, administration Cc:

Description

Hello,

In French, in a post edit when adding an image or a gallery block, the "Alt Text" label is misaligned with the input field.

We can see this behaviour on Ubuntu20.04/Firefox88.0.1 and Chrome 90.0.4430.212.

Step to reproduce

  • be sure to have French as language in your profile
  • in a post add an "Image block"
  • click on "mediathèque" to add an existing image
  • Check an image and see the sidebar

Attachments (6)

53229.png (886.9 KB) - added by sebastienserre 3 years ago.
Capture d’écran 2021-05-19 à 09.12.16.png (1.6 MB) - added by audrasjb 3 years ago.
OSX + Chrome or Firefox: can't reproduce
firefox_windows.png (90.4 KB) - added by peexy 3 years ago.
Firefox + Windows -> OK
texte-alternatif-chrome-windows.2.png (53.3 KB) - added by sabernhardt 3 years ago.
Chrome + Windows, with scrollbar
texte-alternatif-chrome-windows-75px.png (4.4 KB) - added by sabernhardt 3 years ago.
reducing max-width from 80px to 75px
53229.diff (769 bytes) - added by sabernhardt 3 years ago.
changing max-width to 72px and then resetting that to 100% on smaller screens

Change History (17)

@sebastienserre
3 years ago

@audrasjb
3 years ago

OSX + Chrome or Firefox: can't reproduce

#1 @audrasjb
3 years ago

Hi, thanks @sebastienserre,

I can't reproduce the bug on OSX + Chrome or Firefox (…which of course doesn't mean that we don't need to fix the issue).

#2 @audrasjb
3 years ago

  • Focuses css added

#3 @peexy
3 years ago

Hi,

FYI, I can't reproduce it on the latest version of Firefox and Chrome for Windows.

@peexy
3 years ago

Firefox + Windows -> OK

@sabernhardt
3 years ago

Chrome + Windows, with scrollbar

@sabernhardt
3 years ago

reducing max-width from 80px to 75px

#4 @sabernhardt
3 years ago

It seems the scrollbar can make the container too small for the floating elements to stay side-by-side.

I tried reducing the .media-sidebar .setting .name label max-width to 75 pixels, which successfully kept the input on the same line in Windows Chrome and Firefox. The top padding on the label does not make sense when "Texte alternatif" and "URL du fichier" (and other translations) are on two lines, though it might be preferable to the current space above the input. Otherwise, we could consider switching to flexbox.

#5 @audrasjb
3 years ago

  • Keywords 2nd-opinion removed
  • Owner set to audrasjb
  • Status changed from new to accepted

haaahaa! indeed @sabernhardt it's most likely because of the scrollbar. I can simulate the issue on no-scrollbar configured browsers by adding a right border of around 10px in the container.

Reducing the padding to 75px fixes the issue. The top padding doesn't really need to be changed in my opinion. It would introduce more risk than anything.

Thanks for your help!

@sabernhardt
3 years ago

changing max-width to 72px and then resetting that to 100% on smaller screens

#6 @sabernhardt
3 years ago

  • Keywords has-patch added; needs-patch removed

75 pixels was still too wide for Hebrew, so the patch edits the value to 72px. With 53229.diff, the max-width also applies in the image details dialog when in the Media Library (grid view). At narrower screen widths, the max-width should no longer be so small (I chose 100% instead of none).

#7 @sebastienserre
3 years ago

Thank you, @sabernhardt. I've tested your patch, and it solves on my end.

#8 @audrasjb
3 years ago

  • Keywords commit added

Thanks for the patch @sabernhardt. Thanks for testing @sebastienserre !
Works great for me as well, moving for commit.

#9 @audrasjb
3 years ago

  • Milestone changed from Awaiting Review to 5.8

ah. it wasn't in 5.8. Adding in the milestone for 5.8 consideration :)

#10 @ryelle
3 years ago

  • Keywords commit removed

It looks like there's a padding above the label that causes the label to be misaligned when it wraps, but is necessary for centering when it's only one line. Ideally that should be fixed before committing.

Otherwise, we could consider switching to flexbox.

In my opinion, this sounds like a better idea, though maybe not for 5.8.

#11 @sabernhardt
3 years ago

  • Milestone changed from 5.8 to Future Release

Moving to future release for time to explore another option

Note: See TracTickets for help on using tickets.