Page MenuHomePhabricator

Further improvements to UI of Review Changes cards
Closed, ResolvedPublic2 Estimated Story Points

Assigned To
Authored By
Samwalton9-WMF
May 13 2026, 11:29 AM
Referenced Files
F96402258: Screenshot 2026-07-29 at 16.54.57.png
Wed, Jul 29, 3:55 PM
F96402253: image.png
Wed, Jul 29, 3:55 PM
F94086757: Screenshot 2026-07-16 at 18-40-27.png
Thu, Jul 16, 10:59 PM
F94086673: Screenshot 2026-07-16 at 18-39-49.png
Thu, Jul 16, 10:59 PM
F94086612: Screenshot 2026-07-16 at 18-39-09.png
Thu, Jul 16, 10:59 PM
F94086485: Screenshot 2026-07-16 at 18-37-23.png
Thu, Jul 16, 10:59 PM
F92801046: Screenshot 2026-07-10 at 15.32.32.png
Jul 10 2026, 2:32 PM
F92800318: Screenshot 2026-07-10 at 15.26.29.png
Jul 10 2026, 2:26 PM

Description

In T421901 we implemented a new visual styling for Review Changes cards. @Lwilson-ctr had some feedback and further iteration suggestions:

  • The username should be bold, same as the page name.
  • After a diff has been opened, the 'boldening' of the username should be removed.
  • Tapping a diff should immediately grey it out. It shouldn't wait for the page to load.
  • The user icon should be color-emphasized and color-subtle as well to match the rest of the card.
  • The height of each row on desktop is inconsistent, possibly because of the user icon. They should be the same height to make it easier to parse.

image.png (1,086×905 px, 218 KB)

  • ^ This is because of the user info button taking up more vertical space. It should vertically overflow if needed, like this (image shows the hovered state):

image.png (988×846 px, 100 KB)

  • The icon itself should be aligned with the left. See the hover state of the icon with negative margin:

image.png (1,423×1,266 px, 212 KB)

  • [From original criteria] On desktop only, the page title and username in Review Changes are clickable, but this is not the case on mobile
  • [From original criteria] On desktop only, the latest comment timestamp in Active Discussions is clickable, but this is not the case on mobile.

Figma link - https://www.figma.com/design/6VElpFGPXf9EAuClQbpPlA/T419358-Special-Homepage?node-id=2022-38885&t=Hdaa6CepU3uTTwDX-1

Event Timeline

Samwalton9-WMF moved this task from Inbox to Design backlog on the Moderator-Tools-Team board.

@Lwilson-ctr Transferred your suggestions here. Anything missing or incorrectly described?

Dillon changed the task status from Open to In Progress.Jun 29 2026, 4:54 PM
Dillon claimed this task.
Dillon edited projects, added: Moderator-Tools-Team (Kanban); removed: Moderator-Tools-Team.
Dillon moved this task from Ready to In Progress on the Moderator-Tools-Team (Kanban) board.

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

[mediawiki/extensions/PersonalDashboard@master] Further improvements to UI of Review Changes cards

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

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

This looks good to me! Tested/verified every bullet point in this task.

This looks good to me! Tested/verified every bullet point in this task.

Thanks, @Samwalton9-WMF! I just fixed a bug where clicking on the user info button would incorrectly grey out the review changes card, so it might be worth a quick re-check.

Screenshot 2026-07-10 at 15.26.29.png (880×416 px, 46 KB)

Is this expected in the patch demo environment?

Screenshot 2026-07-10 at 15.26.29.png (880×416 px, 46 KB)

Is this expected in the patch demo environment?

Interesting... I've never seen that error message before. Does the browser console show anything?

TypeError: triggerElement.closest is not a function
    getOpenContext util.js:111
    open App.vue:31
    togglePopover init.js:36
errorLogger.js:19:11
XHRPOST
https://6941aa7e06.catalyst.wmcloud.org/w/rest.php/checkuser/v0/userinfo?uselang=en
[HTTP/2 500  333ms]

The 500 response is

message 'Error: exception of type Error: Interface "Wikimedia\\MetricsPlatform\\EventSubmitter" not found'
exception { id: "15203803bc42e39f9c378df0", type: "Error", file: "/var/www/html/w/extensions/EventLogging/includes/MetricsPlatform/EventSubmitter.php", … }
httpCode 500
httpReason "Internal Server Error"

TypeError: triggerElement.closest is not a function
    getOpenContext util.js:111
    open App.vue:31
    togglePopover init.js:36
errorLogger.js:19:11
XHRPOST
https://6941aa7e06.catalyst.wmcloud.org/w/rest.php/checkuser/v0/userinfo?uselang=en
[HTTP/2 500  333ms]

The 500 response is

message 'Error: exception of type Error: Interface "Wikimedia\\MetricsPlatform\\EventSubmitter" not found'
exception { id: "15203803bc42e39f9c378df0", type: "Error", file: "/var/www/html/w/extensions/EventLogging/includes/MetricsPlatform/EventSubmitter.php", … }
httpCode 500
httpReason "Internal Server Error"

Okay I was able to reproduce the error on my end. This is what I gathered so far:

  • It occurs on all pages with the user info card, including Recent Changes and Watchlist.
  • This is happening on other new instances of Patch Demo as well.
  • Maybe something broke between EventLogging extension and Metrics Platform client?
  • Or Patch Demo isn't properly installing/resolving the wikimedia/metrics-platform composer dependency?

not blocking: I think we need to do an a11y pass. each card now has 3 tab stops and the overlay link has no focus target or styling. Not blocking because we haven't done such a pass in a while, so it should probably be its own task.

While I agree on an a11y pass, what if a user intentionally wants to focus on the title, user info card, or username anchors?

Also I'm unable to reproduce the no focus target or styling issue. Both Review Changes and Active Discussions look identical on Firefox and Chrome:

Review Changes (overlay is the anchor)Active Discussions (card is the anchor)
Firefox
Screenshot 2026-07-16 at 18-37-23.png (639×381 px, 42 KB)
Screenshot 2026-07-16 at 18-39-09.png (639×381 px, 40 KB)
Chrome
Screenshot 2026-07-16 at 18-39-49.png (621×381 px, 42 KB)
Screenshot 2026-07-16 at 18-40-27.png (621×381 px, 39 KB)

that's ... weird. I was definitely not getting the focus rings in dark mode, even after a hard refresh. I switched out of dark mode, and they were visible in light mode. and now they are visible in dark mode too.

Change #1309228 merged by jenkins-bot:

[mediawiki/extensions/PersonalDashboard@master] Further improvements to UI of Review Changes cards

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

Interesting to see that this has resulted in an extra border on desktop, matching the one on mobile. Is that for the same underlying reason as for T432468? (i.e. should I broaden that ticket to both desktop and mobile?)

oldnew
image.png (1,262×1,478 px, 195 KB)
Screenshot 2026-07-29 at 16.54.57.png (1,244×1,420 px, 183 KB)

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

https://6941aa7e06.catalyst.wmcloud.org/w/