Page MenuHomePhabricator

OOUI widgets now have huge fonts and misaligned buttons in some places
Closed, ResolvedPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

Also:

What happens?:

On Special:RecentChanges, the font size for the filter labels is huge, the text on the buttons is bigger than on other buttons on the page.

In the dialog for the AC/DC gadget, the font sizes are much bigger. There's a gap above and below the "Publish changes" button. The ellipsis button only aligns with the input field at the top, not the bottom.

What should have happened instead?:

On Special:RecentChanges, the font size should be more consistent with the rest of the page.

In the dialog for the AC/DC gadget, the font size should be more consistent with the rest of the page. The "Publish changes" button should be the same height as the dialog header. The ellipsis button should be the same height as the input field next to it.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

Looking at pages in the Wayback Machine, there used to be

body > .oo-ui-windowManager, .oo-ui-defaultOverlay {
    font-size: 0.875em;
}

It seems this was removed in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/964977

Screenshots:

Special:RecentChanges:

recentchanges.png (729×1 px, 115 KB)

Dialog for the AC/DC gadget:

acdc.png (823×1 px, 32 KB)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
matmarex added a project: MediaWiki-General.

I'm sorry about this, I must have had a lapse of reason when working on these changes (in T348287 and subtasks). I focused on how they affected dialogs in VisualEditor (which was not much - T350494), and somehow thought that all other tools would be affected even less than that, which in retrospect makes no sense.

I suppose we should restore the body > .oo-ui-windowManager CSS rule to fix this. The .oo-ui-defaultOverlay one would conflict with new styles, and should not be needed, as I don't see any code that would be affected in neither site JS nor deployed JS.

Change 971624 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/skins/CologneBlue@master] Restore OOUI dialog styles for compatibility

https://gerrit.wikimedia.org/r/971624

Change 971625 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/skins/MonoBook@master] Restore OOUI dialog styles for compatibility

https://gerrit.wikimedia.org/r/971625

Change 971626 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/skins/Modern@master] Restore OOUI dialog styles for compatibility

https://gerrit.wikimedia.org/r/971626

Change 971627 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/skins/Vector@master] Restore OOUI dialog styles for compatibility

https://gerrit.wikimedia.org/r/971627

Change 971628 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/skins/Timeless@master] Restore OOUI dialog styles for compatibility

https://gerrit.wikimedia.org/r/971628

I set up a demo page and a site script on the demo wiki, so that the fix can be easily tested, for example https://patchdemo.wmflabs.org/wikis/bdce762b0e/w/index.php?title=T350544&useskin=vector:

Screen Shot 2023-11-06 at 02.25.19.png (800×1 px, 71 KB)
Screen Shot 2023-11-06 at 02.25.23.png (800×1 px, 27 KB)
Screen Shot 2023-11-06 at 02.25.26.png (800×1 px, 78 KB)

For future reference when the demo wiki is deleted:

Change 971627 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Restore OOUI dialog styles for compatibility

https://gerrit.wikimedia.org/r/971627

I can’t test AC/DC on the demo wiki because it requires WikibaseMediaInfo, but the process dialog test looks good to me (if I disable the font-size: 0.875em; rule in dev tools then it starts to look broken like in the screenshots in the task description again). Thanks for looking into it!

Change 971539 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/skins/Vector@wmf/1.42.0-wmf.3] Restore OOUI dialog styles for compatibility

https://gerrit.wikimedia.org/r/971539

Change 971624 merged by jenkins-bot:

[mediawiki/skins/CologneBlue@master] Restore OOUI dialog styles for compatibility

https://gerrit.wikimedia.org/r/971624

Change 971628 merged by jenkins-bot:

[mediawiki/skins/Timeless@master] Restore OOUI dialog styles for compatibility

https://gerrit.wikimedia.org/r/971628

Change 971625 merged by jenkins-bot:

[mediawiki/skins/MonoBook@master] Restore OOUI dialog styles for compatibility

https://gerrit.wikimedia.org/r/971625

Change 971626 merged by jenkins-bot:

[mediawiki/skins/Modern@master] Restore OOUI dialog styles for compatibility

https://gerrit.wikimedia.org/r/971626

Change 971539 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.42.0-wmf.3] Restore OOUI dialog styles for compatibility

https://gerrit.wikimedia.org/r/971539

Mentioned in SAL (#wikimedia-operations) [2023-11-06T14:35:25Z] <urbanecm@deploy2002> Started scap: Backport for [[gerrit:966798|Generalize Meta/Commons exceptions for CentralAuth cookie handling (T257852)]], [[gerrit:971539|Restore OOUI dialog styles for compatibility (T350544)]]

Mentioned in SAL (#wikimedia-operations) [2023-11-06T14:36:41Z] <urbanecm@deploy2002> urbanecm and tgr and matmarex: Backport for [[gerrit:966798|Generalize Meta/Commons exceptions for CentralAuth cookie handling (T257852)]], [[gerrit:971539|Restore OOUI dialog styles for compatibility (T350544)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2023-11-06T14:48:39Z] <urbanecm@deploy2002> Finished scap: Backport for [[gerrit:966798|Generalize Meta/Commons exceptions for CentralAuth cookie handling (T257852)]], [[gerrit:971539|Restore OOUI dialog styles for compatibility (T350544)]] (duration: 13m 13s)

All fixes are merged. The Vector fix has been deployed to Wikimedia wikis, so the issue should be resolved on Vector. The fixes for other skins will be deployed this week on the usual schedule, between Tuesday and Thursday.

The RecentChanges filter popup is still big for me. Was it supposed to be fixed by the fix to Vector skin?

image.png (1×1 px, 245 KB)

Sorry, I thought it would be, but it's actually only fixed by https://gerrit.wikimedia.org/r/c/mediawiki/core/+/971519, which will roll out later this week. This is because, unlike everything else, it would need the styles for .oo-ui-defaultOverlay. I changed that in that patch (this change), which was merged last week, but I forgot it was not deployed yet.

Test wiki on Patch demo by Matma Rex using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/bdce762b0e/w/