Ive confirmed this bug is introduced by https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1290821

In T439897#12389035, @AnneT wrote:

In T439897#12387428, @Jdlrobson-WMF wrote:

There is an easier way to replicate this:

mw.loader.using( '@wikimedia/codex');

So while the issue is the style change - the bigger issue here is we're reloading the entirety of Codex.

For this reason I'd recommend we move away from MediaWiki\\ResourceLoader\\CodexModule and embrace a @wikimedia/codex dependency. Thoughts?

I don't think this is exactly the problem - ULS is loading CdxCard styles, and the aspect ratio rule there must have the same specificity as the aspect ratio rule in ReadingLists, because once the CdxCard styles come later in the cascade they override the ReadingLists style. ReadingLists loading the entirety of the codex package won't fix that.

It looks like ULS is loading the entirety of Codex (the ext.uls.setlang module depends on @wikimedia/codex) unnecessarily. Nothing in ULS uses the card component, yet it's loading the styles for CdxCard. Unless there's some reason I'm not aware of, that module should be a CodexModule that only loads the necessary components.

Even if that is fixed, we should still make the aspect-ratio style in ReadingLists more specific than the CdxCard style since we can't know that the CdxCard styles will never appear later in the cascade. So I think the !important fix is fine, plus we may want to ping the language team about their module.

can we do something similar to this patch with the watchstar? https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/1346771

when should this be deployed? @Sneha

while discussing this with @lorem, I proposed simplifying the experience by just setting focus on the newly loaded item. we will still announce via aria-live that new items are loaded in. i will remove the aria-busy because its usually such a quick load time, it could be distracting

@Sneha should there also be a requirement about the text padding on desktop?

backport scheduled for tuesday late backport window, I will close after that

I have one more config clean up patch i will backport on tues. i will resolve this after that

we just discussed this ticket as a team and while we agree the issue should be fixed, we want to carefully evaluate the solution given how bug prone changing content styles is. we also want to consider updating other inline elements that have the same issue (i.e. block quotes, tables, dl), so that the fix is more holistic rather than just on lists.

@Volker_E sorry this wasnt clear in the original task, but the appearance menu has to be unpinned, i.e. in the vector header. try clicking "hide"

This alignment issue comes down to the menu tab styles, which applies a 2px bottom border to achieve this style:

padding: 9px 0 7px 0;
margin-bottom: -1; // to help make the bottom border align closer to the grey border of the container element.