Page MenuHomePhabricator

bugfix mobile module card design
Closed, ResolvedPublic5 Estimated Story Points

Assigned To
Authored By
jsn.sherman
Dec 8 2025, 8:13 PM
Referenced Files
F71198157: Screen Recording 2025-12-22 at 16.44.32.mov
Mon, Dec 22, 4:50 PM
F71197534: Screenshot 2025-12-22 at 7.35.49 AM.png
Mon, Dec 22, 4:00 PM
F71197386: Group 8.png
Mon, Dec 22, 1:02 PM
F71197383: Group 9.png
Mon, Dec 22, 1:02 PM
Restricted File
Dec 19 2025, 8:30 PM
F71149712: image.png
Dec 19 2025, 8:29 PM
F71149686: SCR-20251219-npkf.png
Dec 19 2025, 8:29 PM
F71149683: SCR-20251219-noky.png
Dec 19 2025, 8:29 PM

Description

Acceptance criteria:

  • SPA-like URL navigation (e.g. Special:PersonalDashboard to Special:PersonalDashboard/RiskyArticleEdits and vice versa)

Fix design issues identified by @OTichonova in T402782#11430504.

  • The back arrow should be smaller (16x16pts)
  • The margins for the header should be 8pts
  • The margin for the content is 16 pts
  • The title is Heading 4 (bold)
  • The padding around the title is too large. Header height is 46pts
  • The dividing line is missing between the header and content on the page

Screenshot 2025-12-03 at 21.49.37.png (646×1 px, 206 KB)

Event Timeline

jsn.sherman changed the task status from Open to In Progress.
jsn.sherman triaged this task as High priority.
jsn.sherman moved this task from Ready to In Progress on the Moderator-Tools-Team (Kanban) board.
Kgraessle set the point value for this task to 5.Dec 9 2025, 3:21 PM
Dillon removed the point value 5 for this task.
Dillon set the point value for this task to 5.

Change #1217264 had a related patch set uploaded (by Jsn.sherman; author: Jsn.sherman):

[mediawiki/extensions/PersonalDashboard@master] WIP: use Codex icons instead of OOUI icons

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

Okay, I've done some of the underlying structural cleanup.

Change #1217264 merged by jenkins-bot:

[mediawiki/extensions/PersonalDashboard@master] Module header/footer server side cleanup

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

Change #1218787 had a related patch set uploaded (by Kgraessle; author: Kgraessle):

[mediawiki/extensions/PersonalDashboard@master] bugfix mobile module card design

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

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

Kgraessle updated the task description. (Show Details)

@OTichonova

Hi, I implemented the design fixes outlined in the ticket and this is ready for a design review.
There's one outstanding implementation:

The padding around the title is too large. Header height is 46pts

Can you send me a screenshot that demos where the extra padding is?

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

https://2db0445b81.catalyst.wmcloud.org/w/

Hi @Kgraessle, I was referring to the height of the header/element (Figma)

Figma & screenshot
Group 5.png (664×982 px, 150 KB)

Hi @Kgraessle, great work so far! Just a few nits:

  • On desktop, the "Review changes" header is vertically off-center from the rest of the module headers:
    SCR-20251219-noky.png (144×1 px, 31 KB)
  • On mobile, the navbar title is horizontally off-center from the rest of the page: {F71149763}
  • On mobile, the navbar doesn't stick when scrolling down like Special:Preferences does:
    image.png (220×806 px, 29 KB)

The last one can easily be fixed by just adding position: sticky; top: 0; to .personal-dashboard-module-header.

Hi @Kgraessle, this looks great! 2 small things

  1. The arrow in the header seems smaller. Right now it fits in a 14x14pts frame, while in the designs it is a little bit bigger, fitting in a 20x20pts frame.
  2. Can the margin by the arrow and info icon be 12 pts?
PatchdemoDesign
Group 9.png (248×500 px, 33 KB)
Group 8.png (127×443 px, 20 KB)

@Dillon

On desktop, the "Review changes" header is vertically off-center from the rest of the module headers

Done!

On mobile, the navbar title is horizontally off-center from the rest of the page: {F71149763}

Done! (unless I'm missing something as the screenshot isn't appearing).

On mobile, the navbar doesn't stick when scrolling down like Special:Preferences does:

@OTichonova
Do we want the navbar to be sticky?


The arrow in the header seems smaller. Right now it fits in a 14x14pts frame, while in the designs it is a little bit bigger, fitting in a 20x20pts frame.

@OTichonova
Can you tell me what browser you're using for reproducing this?
I'm seeing the arrow as 16x16 on patch demo:

Screenshot 2025-12-22 at 7.35.49 AM.png (663×403 px, 76 KB)

Can the margin by the arrow and info icon be 12 pts?

Done!

@Kgraessle
I am in Google Chrome Version 143.0.7499.147

I just saw another thing:
The title size (the "Review changes") is a Header 4 size (font 16, line-height 26) in the designs, while it is bigger in the patchdemo.

Change #1218787 merged by jenkins-bot:

[mediawiki/extensions/PersonalDashboard@master] bugfix mobile module card design

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

SPA-like URL navigation (e.g. Special:PersonalDashboard to Special:PersonalDashboard/RiskyArticleEdits and vice versa)

Let's make this another ticket. It's a nice-to-have, but for the MVP the functionality is the same.

Dillon changed the task status from In Progress to Open.Tue, Jan 13, 5:08 PM
Dillon moved this task from QA to Done on the Moderator-Tools-Team (Kanban) board.

SPA-like URL navigation (e.g. Special:PersonalDashboard to Special:PersonalDashboard/RiskyArticleEdits and vice versa)

Let's make this another ticket. It's a nice-to-have, but for the MVP the functionality is the same.

T414578: Don't reload Special:Dashboard when selecting a module in mobile view