| • alexhollender_WMF | |
| Sep 2 2022, 4:46 PM |
| F36916398: Screenshot 2023-03-17 at 8.26.54 AM.png | |
| Mar 17 2023, 3:30 PM |
| F36916158: article-toolbar-EN-MY-comparison.jpg | |
| Mar 17 2023, 11:31 AM |
| F36865394: failed_diff_MediaWiki_Test_vector-2022_logged-in_0_html_2_desktop.png | |
| Feb 22 2023, 4:30 PM |
| F36865392: MediaWiki_Test_vector-2022_logged-in_0_html_2_desktop-1.png | |
| Feb 22 2023, 4:30 PM |
| F36865390: MediaWiki_Test_vector-2022_logged-in_0_html_2_desktop.png | |
| Feb 22 2023, 4:30 PM |
| F35507689: Screen Shot 2022-09-02 at 12.45.41 PM.png | |
| Sep 2 2022, 4:46 PM |
| F35507688: Screen Shot 2022-09-02 at 12.45.11 PM.png | |
| Sep 2 2022, 4:46 PM |
| F35507687: Screen Shot 2022-09-02 at 12.42.55 PM.png | |
| Sep 2 2022, 4:46 PM |
Given the updated styling of the tabs we can reduce the height of the toolbar from 41px to 36px.
I think the easiest way to do this is to reduce the padding on the top of the tabs from 18px to 12px:
| current (18px) | reduced (12px) |
|---|---|
 |  |
Assuming T234990 gets completed before this task, we will also need to reduce the margin on the top of the Watchstar and Wikilove icons from 6px to 0 px:
| current (6px) | reduced (0px) |
|---|---|
 |  |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | ovasileva | T317884 [EPIC] Vector 2022 post-deployment work | |||
| Open | ovasileva | T317632 [EPIC] Visual refinements pt2 | |||
| Resolved | • KieranMcCann | T316950 [Visual refinements] Reduce height of article toolbar |
Change 890140 had a related patch set uploaded (by Sushrith Bogi; author: Sushrith Bogi):
[operations/mediawiki-config@master] Reduce height of the article toolbar
@Sushrith_Bogi There was already a notification about the patch in this task; please do not create duplicate notifications. Thanks.
Change 890140 abandoned by Jforrester:
[operations/mediawiki-config@master] Reduce height of the article toolbar
Reason:
This file is a static copy of the built code for reference checking over time; you should make your changes to the actual code which appears to be from https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/0995b865d4927f2653e82877baaf5c137ed16109/resources/common/variables.less#128 (via https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/0995b865d4927f2653e82877baaf5c137ed16109/resources/skins.vector.styles/components/MenuTabs.less#91 ), so in the Vector skin code repository.
Change 890360 had a related patch set uploaded (by Sushrith Bogi; author: Sushrith Bogi):
[mediawiki/skins/Vector@master] Reduce height of the article toolbar
@Sushrith_Bogi thanks for the patch. I've taken a look at it using our Pixel visual regression tool and I can verify that the changes to logged-out users are expected, and there are no changes to legacy Vector.
However, I did notice some issues with the toolbar for logged-in users. Can anyone else replicate this issue?
(The underline on the active tab is floating above the bottom border).
 |  |  |
| reference | test | diff |
Edit: Sorry! Just noticed that this is addressed in the task description.
Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/a3e88bed28/w
Hey @KieranMcCann could you please do a design review on https://patchdemo.wmflabs.org/wikis/a3e88bed28/wiki/Main_Page with relation to this ticket? the patch looks good to me, so once you've confirmed, please move to code review and I'll go ahead and merge it.
Hi @Jdlrobson. Looks good to me but is there an easy way for me to check how it looks in other scripts? I’m thinking of something like Burmese where the type ascenders and descenders will be longer than Latin script.
Change 890360 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Reduce height of the article toolbar
Thank @Jdlrobson. On comparison the Burmese spacing looks different. There us both a larger space between the H1 and the line below it, and above the article toolbar items. Is this expected behaviour due to the properties of different scripts?
@kieranMccan I see on my.wikipedia.org they are using the font stack Pyidaungsu, "Noto Sans Myanmar", TharLon, Padauk, Myanmar3, "Masterpiece Uni Sans" which impacts display of tabs there (see screenshot of how this looks currently because they do not change the line height)
I'd recommend a new task for this - we'd probably want to think holistically about that e.g. review the whole of the Vector 2022 skin in Burmese script.
@Volker_E would having some more generic handling of the Burmese alphabet make sense at the design token level? I wonder if we should add that font-stack for example to MediaWiki core? Should we add language specific overrides for line height too? If not at MediaWiki core should we be adding line height rules to https://my.wikipedia.org/wiki/%E1%80%99%E1%80%AE%E1%80%92%E1%80%AE%E1%80%9A%E1%80%AC%E1%80%9D%E1%80%AE%E1%80%80%E1%80%AE:Common.css#L-5 ?
Thanks @Jdlrobson for the added information. In that case I wonder if there may be other scripts in addition to Burmese that have a similar issue?
Design review was QA here, so moving to sign off.
@KieranMcCann I am sure other scripts do have this issue, so perhaps we could have a new spike ticket for reviewing line height in different languages. Note T332171 might also help this somewhat?
Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted: