| Daimona | |
| Sep 16 2023, 3:07 PM |
| F41431786: Screenshot 2023-11-02 at 09.36.45.png | |
| Nov 2 2023, 8:37 AM |
| F40270844: 2023-10-25_13-35-04.png | |
| Oct 25 2023, 8:55 PM |
| F40270084: 2023-10-25_13-49-13.png | |
| Oct 25 2023, 8:55 PM |
| F40269822: 2023-10-25_13-10-01.png | |
| Oct 25 2023, 8:55 PM |
| F40268532: 2023-10-25_13-10-39.png | |
| Oct 25 2023, 8:55 PM |
| F40268797: 2023-10-25_13-45-46.png | |
| Oct 25 2023, 8:55 PM |
| F40268753: 2023-10-25_13-43-53.png | |
| Oct 25 2023, 8:55 PM |
| F38905826: Screenshot from 2023-10-19 23-27-33.png | |
| Oct 20 2023, 3:48 AM |
If the label of the inline diff toggle (diff-inline-format-label) has more than one word, then the label will span multiple lines, see screenshot from this page:
This looks off because the label and the toggle are not vertically aligned, and it adds 16px of vertical spacing to the whole header.
See list of affected languages.
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | https://phabricator.wikimedia.org/T346476 here |
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| diffs: vertically align inline toggle and make text nowrap | mediawiki/core | master | +6 -1 |
Thanks so much for reporting this! I'm surprised this got as far as it did without further complaint.
A particularly glaring example in Croatian:
Patch incoming for:
And on really small screens (not that the UI was designed for this in the first place):
cc @JSengupta-WMF to make sure this is fine. Alternatively, we can retain the word wrapping (default behaviour) and just keep the toggle vertically/right aligned, but it may require a flexbox guru (not me!) to figure it out.
We should also add instruction in the i18n documentation telling translators to use brevity. I actually wonder if some of these translations are verbose solely to better explain what the toggle does; perhaps now that T346429 is done this will be less of a concern.
Change 967994 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):
[mediawiki/core@master] diffs: vertically align inline toggle and make text nowrap
Joy is out until November 3. The above patch can hold us off until we get designer sign-off. Then again, this has been broken since we launched better diffs, and no apart from this task has complained... so maybe it isn't so urgent.
Change 967994 merged by jenkins-bot:
[mediawiki/core@master] diffs: vertically align inline toggle and make text nowrap
@MusikAnimal Label and the toggle are vertically aligned for all languages tested from https://codesearch.wmcloud.org/core/?q=diff-inline-format-label%22%3A+%22%5B%5E%22%5D%2B%5B+%5D&files=&excludeFiles=&repos=. I will move this to Done. Thanks for all your work!
Status: ✅PASS
Environment: Prod Wiki (Multi-Languages)
OS: macOS Sonoma 14.0
Browser: Chrome 117, Firefox 118, Safari 17.0
Skins. Vector 2022, 2010, Minerva, Monobook, Timeless
Device: MBA M2
Emulated Device:: n/a
Test Links:
https://it.wikipedia.org/w/index.php?title=Utente:Daimona_Eaytoy/Sandbox&curid=6272332&diff=135486924&oldid=135486909&uselang=it
https://codesearch.wmcloud.org/core/?q=diff-inline-format-label%22%3A+%22%5B%5E%22%5D%2B%5B+%5D&files=&excludeFiles=&repos=
✅AC1: https://phabricator.wikimedia.org/T346476
| Small Screen | Zoom | Chrome | Firefox | Safari | Different Skin |
 |  |  |  |  |  |
@MusikAnimal Is it possible to show the toggle on the next line when the screen size is too small or the text length is too long? Something like this
FYI still on leave followed by the P+T leadership so responses maybe delayed.