Page MenuHomePhabricator

Responsive Vector uses hatnote.less and infobox.less at all resolutions
Closed, ResolvedPublicBUG REPORT

Assigned To
Authored By
Izno
Jun 13 2024, 7:57 PM
Referenced Files
F55297556: irudia.png
Jun 13 2024, 10:41 PM
F55297535: irudia.png
Jun 13 2024, 10:41 PM
F55297508: irudia.png
Jun 13 2024, 10:41 PM
F55297516: irudia.png
Jun 13 2024, 10:41 PM
F55297483: irudia.png
Jun 13 2024, 10:41 PM
F55294008: image.png
Jun 13 2024, 7:57 PM
F55294001: image.png
Jun 13 2024, 7:57 PM

Description

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

What happens?:
Styling from hatnote.less and infobox.less is applying at all resolutions

image.png (497×1 px, 300 KB)

What should have happened instead?:
Hatnote.less and infobox.less should be limited to some reasonable width, e.g. mobile resolutions. Image from archive.org:

image.png (525×1 px, 282 KB)

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

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

There might be other files in the 'hacks.less' bucket that are also applying when that wasn't the intention that should be reviewed.

Onwiki discussion: https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)#Thursday_13_June_style_changes

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

And also responsive images, just to document this:

it's also broken some images in infoboxes and sidebars. The images seem to have either shrunk considerably at their default size, stopped loading or completely disappeared. Examples include: Next Senedd election, 2024 United States presidential election, Template:Donald Trump series, Template:Joe Biden series, Template:Keir Starmer sidebar, Template: Rishi Sunak sidebar, Template:Elon Musk series, etc. I remember a similar change to infoboxes was made a few months ago but dropped within a day or two. Can anyone at Wikimedia provide some clarification? ThatRandomGuy1 (talk) 19:16, 13 June 2024 (UTC)

I'll file a separate task for that since it's not obvious to me what the best solution is for that.

And also responsive images, just to document this:

it's also broken some images in infoboxes and sidebars. The images seem to have either shrunk considerably at their default size, stopped loading or completely disappeared. Examples include: Next Senedd election, 2024 United States presidential election, Template:Donald Trump series, Template:Joe Biden series, Template:Keir Starmer sidebar, Template: Rishi Sunak sidebar, Template:Elon Musk series, etc. I remember a similar change to infoboxes was made a few months ago but dropped within a day or two. Can anyone at Wikimedia provide some clarification? ThatRandomGuy1 (talk) 19:16, 13 June 2024 (UTC)

I'll file a separate task for that since it's not obvious to me what the best solution is for that.

Ok, that's T367463: Tables with images inside them appear at minuscule size or disappear due to responsive image CSS.

All infobox templates at Basque Wikipedia are also affected. The width is now larger, line-height is larger and the overall feeling is less compact, which doesn't make sense on some articles, with extremely large infoboxes now.

@Theklan thanks for flagging - can you give me some examples of impacted pages? That would be really helpful! Thanks in advance!

The Main Page is also affected, breaking things that were perfectly aligned, as it seems that heights are not respected anymore: https://eu.wikipedia.org/wiki/Azala

The Main Page is also affected, breaking things that were perfectly aligned, as it seems that heights are not respected anymore: https://eu.wikipedia.org/wiki/Azala

Hey, I don't think this is related as this page doesn't have hatnote or infoboxes in the page. Could you please open a new bug describing what you are seeing? Thanks!

The same is happening at AvoinGLAM page:

irudia.png (811×1 px, 1 MB)

https://meta.wikimedia.org/wiki/AvoinGLAM

At Basque Wikipedia main page

These shouldn't be so high

irudia.png (443×1 px, 114 KB)

All this buttons had the same height

irudia.png (752×1 px, 1 MB)

All this images should have the height of the third one

irudia.png (285×1 px, 149 KB)

All this images should have the height of the last one

irudia.png (517×1 px, 517 KB)

All this is coming from

body.skin--responsive .mw-parser-output a > img, body.skin--responsive .mw-parser-output noscript > img {height: auto !important;}

The images issues are relevant to T367463, not here (same cause, possibly different symptom).

FWIW, thumb-sized images show slightly smaller than my chosen preference (300px) in infoboxes on en.WP in Vector 2022 now. A normal thumbnail image shows as 300px, and the same image in Template:Infobox person (which defaults to the "frameless" image size option) shows as 295px.

https://en.wikipedia.org/w/index.php?title=User:Jonesey95/sandbox&oldid=1228927316

When I force the view to Vector legacy, both images are the same, correct, size. Vector 2022's style sheets do not appear to be respecting users' (or at least my) preferred image thumbnail size.

Feel free to split this to a separate bug if necessary.

For me, at least, the font size in infoboxes on en.WP has changed to 90% of the default size instead of 88%, which it has been forever. In Vector 2010, the font size in infoboxes is still 88%. I am looking at en:John Dalton, for example. I have the (formerly default) "small" font size selected as my prose body font preference in the new radio-button switcher on the right-side toolbar.

Feel free to split this to a separate bug if necessary.

This comment was removed by Jonesey95.

Multi-column tables in infoboxes are aligned badly. See https://en.wikipedia.org/wiki/Chris_Dangerfield for an example.

Feel free to split this to a separate bug if necessary.

The infobox at https://en.wikipedia.org/wiki/2024_European_Parliament_election_in_Ireland is much too wide in Vector 2022. My content column is 900 pixels wide, and my window width is 1,230 pixels. The infobox goes off the right side of the screen, overlapping the right-side toolbar when it is visible, at any window width from 630 pixels to 1,230 pixels. It was working fine before, staying inside the content column.

Feel free to split this to a separate bug if necessary.

Feel free to split this to a separate bug if necessary.

This seems due to adding a new padding rule: T367486

Please either fix this task as requested or revert the problematic change sometime in the next 24 hours. My intent with filing this task 9 hours ago was that an actual fix be deployed Thursday. Guess I should have set it to UBN, because we're now up to 80ish comments onwiki. :/

We can either inverse the media queries for those hatnotes/infobox.less for now (only apply at lower resolutions), or revert.

Those rules always apply right now and override local style and then 'revert override' for desktop. While that might have worked on mobile/minerva (because most editors never use it), I think it is too ambitious for short term rollout to other skins. Those styles were specifically written to be used by mobile and minerva, they were never properly analysed for effect in desktop and other skins.

For instance, we now get the chain width:22em (local style), overriden to width: 100% !important (default infobox.less) and then overridden again with width: auto !important; and max-width: 320px !important;. That doesn't really make sense

We are also mixing stylistic choices of Minerva, with layout requirements for mobile, which also doesn't seem wise.

Simply reverting it for now seems the best short term solution, while a more refined solution is worked on. I'm just not entirely sure how easy this is to revert, as I believe this change was done through multiple repositories at the same time ?

I see recent changes include 8caf710 where ambox styles were restricted to Minerva skin. So for now just do the same with infobox and hatnote styles?

We are working on a fix today. Thanks for your patience.

Change #1043787 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/WikimediaMessages@master] For now scope hatnote and infobox styles

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

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/308e12b5f2/w

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

https://patchdemo.wmflabs.org/wikis/308e12b5f2/w/

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/bdce7350df/w

Change #1043787 merged by jenkins-bot:

[mediawiki/extensions/WikimediaMessages@master] For now scope hatnote and infobox styles

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

Change #1043827 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/WikimediaMessages@wmf/1.43.0-wmf.9] For now scope hatnote and infobox styles

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

Change #1043827 merged by jenkins-bot:

[mediawiki/extensions/WikimediaMessages@wmf/1.43.0-wmf.9] For now scope hatnote and infobox styles

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

Mentioned in SAL (#wikimedia-operations) [2024-06-14T17:11:06Z] <jdrewniak@deploy1002> Finished scap: Backport for [[gerrit:1043827|For now scope hatnote and infobox styles (T367462)]] (duration: 16m 06s)

Hey all, thanks for your patience the patch has been reverted and we will continue work and discussion in T367519 - please subscribe to that ticket if you are interested.

We'll be posting an update to tech news and other places later today.

Apologies for the disruption to your project.