Page MenuHomePhabricator

Cleanup and refactor the CSS in PersonalDashboard
Closed, ResolvedPublic3 Estimated Story Points

Description

Summary

We should cleanup and refactor the common .less files and <style lang="less"> tags that are relied upon by the dashboard layout and the individual modules.

Benefits

This will reduce the technical debt we inherited from the GrowthExperiments extension, making the PersonalDashboard common CSS less complex and more readable.

Acceptance Criteria
  • Migrate all usage of OOUI components and mixins to Codex equivalents.
  • Replace hardcoded property values (e.g. font-size, padding, text-overflow) with Codex Design Tokens.
  • Fix any inconsistencies or bugs (such as the Examples links in Policies and Guidelines showing a text cursor instead of a pointer)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
jsn.sherman triaged this task as Low priority.
jsn.sherman set the point value for this task to 1.
jsn.sherman added subscribers: Dillon, jsn.sherman.

Note that @Dillon is tackling this in an in-progress patch already.

jsn.sherman changed the task status from Open to In Progress.Mar 11 2026, 6:42 PM
jsn.sherman moved this task from Ready to In Progress on the Moderator-Tools-Team (Kanban) board.
Dillon renamed this task from Dashboard Policies & Guidelines 'Examples' links cause mouse to show a text cursor icon instead of a pointing finger to Cleanup and refactor common CSS in PersonalDashboard.Mar 18 2026, 2:08 PM
Dillon renamed this task from Cleanup and refactor common CSS in PersonalDashboard to Cleanup and refactor the CSS in PersonalDashboard.
Dillon updated the task description. (Show Details)
Samwalton9-WMF changed the point value for this task from 1 to 2.Mar 31 2026, 3:08 PM
Samwalton9-WMF changed the point value for this task from 2 to 3.

Change #1266274 had a related patch set uploaded (by Dillon; author: Dillon):

[mediawiki/extensions/PersonalDashboard@master] Cleanup and refactor the CSS in PersonalDashboard

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

Kgraessle subscribed.

This is very minor, but it looks like there's now more spacing between the Review Changes header and the Header Message:

Figma Design:

Screenshot 2026-04-08 at 12.02.24 PM.png (457×1 px, 91 KB)

Changes in this Patch:

Screenshot 2026-04-08 at 12.20.44 PM.png (572×1 px, 49 KB)

Current Spacing on enwiki:

Screenshot 2026-04-08 at 12.21.01 PM.png (367×1 px, 38 KB)

The second issue is more important to fix as the responsiveness of the dashboard on desktop is now broken.
See screenshots below:

Current design where the second module wraps at certain widths:

Screenshot 2026-04-08 at 12.34.51 PM.png (828×1 px, 112 KB)

Screenshot 2026-04-08 at 12.35.00 PM.png (837×1 px, 173 KB)

Changes in this patch:

Screenshot 2026-04-08 at 12.35.24 PM.png (827×833 px, 97 KB)

Screenshot 2026-04-08 at 12.35.31 PM.png (808×643 px, 82 KB)

This is very minor, but it looks like there's now more spacing between the Review Changes header and the Header Message:

Figma Design:

Screenshot 2026-04-08 at 12.02.24 PM.png (457×1 px, 91 KB)

Changes in this Patch:

Screenshot 2026-04-08 at 12.20.44 PM.png (572×1 px, 49 KB)

Current Spacing on enwiki:

Screenshot 2026-04-08 at 12.21.01 PM.png (367×1 px, 38 KB)

The second issue is more important to fix as the responsiveness of the dashboard on desktop is now broken.
See screenshots below:

Current design where the second module wraps at certain widths:

Screenshot 2026-04-08 at 12.34.51 PM.png (828×1 px, 112 KB)

Screenshot 2026-04-08 at 12.35.00 PM.png (837×1 px, 173 KB)

Changes in this patch:

Screenshot 2026-04-08 at 12.35.24 PM.png (827×833 px, 97 KB)

Screenshot 2026-04-08 at 12.35.31 PM.png (808×643 px, 82 KB)

Thanks for pointing these out. Everything should be resolved in the latest patchset!

Test wiki created on Patch demo by KGraessle-WMF using patch(es) linked to this task:
https://f25ca44561.catalyst.wmcloud.org/w/

Change #1266274 merged by jenkins-bot:

[mediawiki/extensions/PersonalDashboard@master] Cleanup and refactor the CSS in PersonalDashboard

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

Note that dark contrast is looking low on mobile view for me on android + linux firefox in several places

Screenshot 2026-04-15 at 13-43-23 Hello JSherman (WMF)! - Test Wikipedia.png (874×1 px, 134 KB)

Screenshot 2026-04-15 at 13-44-57 Hello JSherman (WMF)! - Wikipedia.png (874×1 px, 149 KB)

The same low contrast is visible on ios firefox on some icons, but not others. It's hard to tell where the issue is coming from since teswiki is configured differently from our pilot wikis. Let's check back in tomorrow when this is on group 2.

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

https://f25ca44561.catalyst.wmcloud.org/w/