Opened 4 years ago
Last modified 4 years ago
#53229 accepted defect (bug)
"Alt Text" label misaligned in French
Reported by: |
|
Owned by: |
|
---|---|---|---|
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)
Change History (17)
#1
@
4 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).
#3
@
4 years ago
Hi,
FYI, I can't reproduce it on the latest version of Firefox and Chrome for Windows.
#4
@
4 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
@
4 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!
#6
@
4 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).
#8
@
4 years ago
- Keywords commit added
Thanks for the patch @sabernhardt. Thanks for testing @sebastienserre !
Works great for me as well, moving for commit
.
#9
@
4 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
@
4 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.
OSX + Chrome or Firefox: can't reproduce