fwiw, this could be a temporary solution :3

Change #1166868 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] Message, styles: Ensure icon never shrinks

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

Thanks everyone for reporting this and @ekrem for the workaround - I've applied that fix in the Codex Message component.

To reproduce on localhost:

• view a page with a cdx-message--warning box, such as the userpage of a user that doesn't exist: http://localhost:8080/wiki/User:BlockedUser
• narrow the screen

Change #1166868 merged by jenkins-bot:

[design/codex@main] Message, styles: Ensure icon never shrinks

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

Change #1171718 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v2.2.0 to v2.2.1

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

Change #1171718 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v2.2.0 to v2.2.1

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

Despite the Codex patch, this does not seem to be fixed.

The above update will have missed the train for this week. Did you check the live wikis?

i'm sorry for not reporting this earlier, but on azwiki, where the change resides in common.css, the fix doesn't affect the minerva skin (see fig. 1). it just doesn't get loaded, and it doesn't appear in the computed styles section in the devtools of the browser (see fig. 1); i don't know why. such an issue isn't present on my local wiki (see fig. 2 and 3).

fig. 1	fig. 2	fig. 3

In T398529#11036991, @ekrem wrote:

i'm sorry for not reporting this earlier, but on azwiki, where the change resides in common.css, the fix doesn't affect the minerva skin (see fig. 1).

The mobile website does not load Common.css. Minerva on the desktop website is fine.

In T398529#11037058, @Izno wrote:

In T398529#11036991, @ekrem wrote:

i'm sorry for not reporting this earlier, but on azwiki, where the change resides in common.css, the fix doesn't affect the minerva skin (see fig. 1).

The mobile website does not load Common.css. Minerva on the desktop website is fine.

yeah i just realized that it says «except for mobilefrontend» on mediawiki.org, thanks!

This fix now breaks icon height, because Vue icon styles override message styles:

.cdx-message .cdx-message__icon, .cdx-message .cdx-message__icon--vue {
  height: var(--line-height-medium,1.625rem);
}

.cdx-message--warning .cdx-message__icon {
  min-width: 10px;
  min-height: 10px;
  width: calc(var(--font-size-medium,1rem) + 4px);
  height: calc(var(--font-size-medium,1rem) + 4px);
  display: inline-block;
  vertical-align: text-bottom;
}

For example, see warning message in the hidden diff.

(boldly moving back to the Codex inbox given the above)

In T398529#11048062, @SerDIDG wrote:

For example, see warning message in the hidden diff.

I was able to reproduce. But FYI, this new bug is only in Vector 2022. The old bug was also in other skins.

Bisecting/testing locally, it looks like the new issue might be a separate regression from 8aafb2a333. I'll let the Codex maintainers decide whether it should be split into a new bug report or not :)

@AnneT do you mind taking a look at this and determining what needs to be done?

There's a number of things slightly off here, that lead to this weird vertical icon sizing

1. The min-sizes of the icons are off. That is not fixing the issue but adds to the confusion. They should be set alongside the font mode values and aligned to the icon sizes. This would not fix the issue though
2. In 'css-icon.less' mixin the calculated min-size is wrong. It should not be 10px at medium icon size. This would not fix the issue though.
3. In T396519 a use of line-height was introduced to vertically align the icon with the surrounding text. This override is now shrinking the Message icon in certain contexts.

We should fix all three things in order for the code to be simpler readable. Next I will file tasks around this.