Page MenuHomePhabricator

There is excessive whitespace in between dashboard modules on certain skins
Closed, ResolvedPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

  • Log in to your dashboard on Vector 2010 or Monobook OR
  • Log in to your dashboard on Vector 2022
  • Hide all of the sidebars

What happens?:
You can see a lot of whitespace between the Recent Activity module and the Policies and guidelines module

What should have happened instead?:
Less whitespace between modules

Other information (browser name/version, screenshots, etc.):

Vector 2022

Screenshot 2026-01-06 at 21.30.54.png (870×1 px, 188 KB)

Monobook

Screenshot 2026-01-06 at 21.31.33.png (940×1 px, 210 KB)

Vector 2010

Screenshot 2026-01-06 at 21.31.57.png (919×1 px, 228 KB)

Event Timeline

Change #1224976 had a related patch set uploaded (by Aarohisharma3; author: Aarohisharma3):

[mediawiki/extensions/PersonalDashboard@master] Reduce excessive vertical whitespace between dashboard modules

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

I've submitted a patch to reduce the excessive vertical whitespace between PersonalDashboard modules:

https://gerrit.wikimedia.org/r/c/mediawiki/extensions/PersonalDashboard/+/1224976

The fix changes the vertical spacing between stacked modules from 1rem to 0.5rem while maintaining the 1rem horizontal gutters. This applies to the desktop view when sidebars are hidden, affecting Vector 2010, Vector 2022, and MonoBook skins.

The change modifies the flexbox layout to use explicit column direction with consistent 0.5rem gaps throughout, which eliminates the excessive whitespace between "Recent Activity", "Policies and guidelines", and "Your impact" modules.

Dillon renamed this task from There is excessive whitespace in bewteen dashboard modules on certain skins to There is excessive whitespace in between dashboard modules on certain skins.Jan 9 2026, 5:21 PM

Change #1224976 merged by jenkins-bot:

[mediawiki/extensions/PersonalDashboard@master] Reduce excessive vertical whitespace between dashboard modules

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

Screenshot 2026-01-21 at 12.56.42 PM.png (505×834 px, 147 KB)

Also noticed the Recent Activity module isn't the same width as Impact/Policies & Guidelines when the columns are wrapping, this should also be fixed.

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

[mediawiki/extensions/PersonalDashboard@master] There is excessive whitespace in between dashboard modules on certain skins

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

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

Hello,
I had a design review question around this ticket; in the figma designs for desktop, each of the modules has a fixed width:
891px for the Recent Activity module

Screenshot 2026-01-26 at 11.21.24 AM.png (827×1 px, 279 KB)

and 445px for the secondary modules (impact/policy)

Screenshot 2026-01-26 at 11.21.11 AM.png (807×1 px, 260 KB)

Should these widths be fixed or should they be responsive (main module takes up 75% and secondary takes up 25% for example)?
The reason I'm asking is that when the width overflows (when you have two side panels for example), and the width is fixed at 891 it would always remain at 891px causing some extra whitespace.

Example screenshots of fixed width:

Screenshot 2026-01-26 at 11.36.30 AM.png (814×1 px, 204 KB)

Screenshot 2026-01-26 at 11.36.17 AM.png (611×1 px, 100 KB)

Screenshot 2026-01-26 at 11.36.10 AM.png (785×1 px, 173 KB)

Example screenshots of responsive width (can also be tested in the patch demo):

Screenshot 2026-01-26 at 11.38.27 AM.png (781×1 px, 185 KB)

Screenshot 2026-01-26 at 11.38.50 AM.png (826×1 px, 125 KB)

Hi @Kgraessle, thanks for spotting this. Yes you're right it should be responsive.
We can do:

  • from 1024px above:
    • feed 75%
    • other modules 25% (on the right/left depending on language)
  • below 1024:
    • feed 100%
    • other modules 100% (stacked below the feed)

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

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

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

Change #1229707 merged by jenkins-bot:

[mediawiki/extensions/PersonalDashboard@master] There is excessive whitespace in between dashboard modules on certain skins

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

jsn.sherman moved this task from QA to Done on the Moderator-Tools-Team (Kanban) board.
jsn.sherman subscribed.

verified fixed on testwiki