Enhance Widget Spacing for Mobile Dashboard

[sainathpoojary]

In the WordPress admin dashboard, widgets are grouped into .postbox-container columns, each containing individual .postbox widgets. Each container has a default margin-bottom: 20px, and each widget also has margin-bottom: 20px, which creates a cumulative 40px gap between containers when they stack vertically.

This layout works well on wider screens, where containers are visually distinct columns. However, on mobile or narrower screens where containers stack, this spacing results in significant vertical gaps, which may not be necessary in that context.

Enchancement:

It may be helpful to align the vertical spacing more closely with the single-column layout by slightly reducing or normalizing the margin-bottom on .postbox-container elements in smaller viewports.

A reduction in container spacing on smaller screens could:

• Improve perceived consistency and flow between widgets
• Reduce unnecessary whitespace
• Create a more compact and mobile-friendly dashboard layout

Screenshot

[sainathpoojary]

If this is considered worth improving, I’ve included a patch

[abcd95]

Hey @sainathpoojary, Thanks for the ticket.

I observed the same behaviour as you reported, but I do not know if this was intentional or not. Although it does make sense to minimize the gaps in the mobile view, since we can't really drag and drop in the mobile view, and widgets appear as a list.

[sabernhardt]

[48340] added the bottom margin (49288.4.diff)

PR reduces vertical spacing between stacked dashboard widgets on smaller screens by setting margin-bottom: 0 on .meta-box-sortables, resulting in a more compact and consistent mobile layout.

Trac ticket: #63337

[ankitmaru]

Hi @sainathpoojary
Thanks for the ticket and the patch.

I tested the changes and agree this improves the dashboard layout on smaller screens. Reducing the vertical gaps between stacked .postbox-container elements makes the mobile experience feel much cleaner and more cohesive. This is a nice enhancement for better usability.

Great job spotting and addressing this.

[sabernhardt]

#63461 was marked as a duplicate.

[sabernhardt]

@afercia Do you remember why both .postbox and #dashboard-widgets .meta-box-sortables needed a bottom margin of 20px for #49288?

• .meta-box-sortables, set in [48340]
• .postbox, since [10872]