WordPress.org

Make WordPress Core

Opened 5 months ago

Last modified 5 months ago

#53229 accepted defect (bug)

"Alt Text" label misaligned in French

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

Change History (17)

@sebastienserre
5 months ago

@audrasjb
5 months ago

OSX + Chrome or Firefox: can't reproduce

#1 @audrasjb
5 months 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
5 months ago

  • Focuses css added

#3 @peexy
5 months ago

Hi,

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

@peexy
5 months ago

Firefox + Windows -> OK

@sabernhardt
5 months ago

Chrome + Windows, with scrollbar

@sabernhardt
5 months ago

reducing max-width from 80px to 75px

#4 @sabernhardt
5 months 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
5 months 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
5 months ago

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

#6 @sabernhardt
5 months 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
5 months ago

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

#8 @audrasjb
5 months ago

  • Keywords commit added

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

#9 @audrasjb
5 months 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
5 months 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
5 months 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.