Page MenuHomePhabricator

Message: Improve readability and usability
Closed, ResolvedPublic

Description

Background

With the addition of font modes in Codex, the Message component uses font-size-medium with line-height-small, but with longer form messages, this is proving to be too tight of a line-height. We should change the line-height to line-height-medium for better readability. This change was likely an oversight and shouldn't have been introduced in the 2.0 release, because changing the line-height to line-height-medium also puts the line-height back to what it was before the font modes release.

Acceptance criteria

  • Within Message, &__content should be updated to use line-height-medium
    • As a result, .cdx-message__icon, .cdx-message__icon--vue should be updated to `line-height-medium as well
    • As a result, &__dismiss-button.cdx-button should have top: calc( @font-size-medium * 0.5 );

Event Timeline

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

Thank you for tagging this task with good first task for Wikimedia newcomers!

Newcomers often may not be aware of things that may seem obvious to seasoned contributors, so please take a moment to reflect on how this task might look to somebody who has never contributed to Wikimedia projects.

A good first task is a self-contained, non-controversial task with a clear approach. It should be well-described with pointers to help a completely new contributor, for example it should clearly pointed to the codebase URL and provide clear steps to help a contributor get setup for success. We've included some guidelines at https://phabricator.wikimedia.org/tag/good_first_task/ !

Thank you for helping us drive new contributions to our projects <3

DTorsani-WMF moved this task from Backlog to Ready for Design/Dev on the Codex board.

@DTorsani-WMF a couple of comments on this...

  1. Do you have examples of why the current wildcard selector isn't working? I think it's probably true that we should only set the line height on &__content and not on everything inside that, I just want to understand what specific issues have come up.
  2. I think the top of the dismiss button will need to change to calc( @font-size-medium * 0.5 ). We no longer need to subtract 2px if the content text uses @line-height-medium.

Thanks @AnneT! Regarding your second point, I meant to actually write '+'. In testing this out, removing the 2px altogether did not seem to work. Adding 2px did work, except it was off by 1px in the small mode. But that seemed like the best option. During implementation, we can try this again.

As for your first point, this was originally brought up by a volunteer in Discord, who said the following:

do you have any insight as to why the second selector is there? It makes it harder to set separate font sizes on children of such Codex messages, or to set uniform font size for it that is not tied to CSS variable names that could potentially change at any time. My use case here looks like this: https://ru.wikipedia.org/wiki/MediaWiki:Gadget-common-site.css#L-97 — Russian Wikipedia has to customise default Codex styles for patrolling messages from FlaggedRevs, since they were redesigned to Codex in a rather haphazard (and even inaccessible in one configuration) way...I want to customise the font size (and line height because it’s also in rems for some reason) because it is too big for the message in question but since there are two selectors for some reason, the code I had to write was weirder.

Change #1155807 had a related patch set uploaded (by Dtorsani; author: Dtorsani):

[design/codex@main] Message: Update line-height of content

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

@AnneT I've pushed up a patch to give us something to look at. You are totally right about the top spacing. This means it is 1px off in x-large mode, but that is okay in my mind, and much better than something being off in small mode.

CCiufo-WMF raised the priority of this task from Low to Needs Triage.Jun 17 2025, 9:15 PM
CCiufo-WMF triaged this task as Low priority.
CCiufo-WMF moved this task from Inbox to Backlog on the Design-System-Team board.

Change #1155807 merged by jenkins-bot:

[design/codex@main] Message: Update line-height of content

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

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