Make WordPress Core

Opened 6 months ago

Last modified 3 weeks ago

#64942 new defect (bug)

Inconsistent paddings/margins for dashboard widgets

Reported by: johnjamesjacoby Owned by:
Priority: normal Milestone: Awaiting Review
Component: Administration Version:
Severity: normal Keywords: has-screenshots admin-reskin has-patch
Cc: Focuses: ui, css

Description

This seems related to #64787 and #64549, but there are a few weird visual inconsistencies in trunk related to dragging & dropping meta-boxes in the dashboard pages:

  • Unique & low-contrast drop-zone background color, which also shows off the bottom padding in an unflattering way
  • Two different border dash styles (not new but doesn't seem that useful anymore IMO)
  • Drop-zones have different spacing when they are vacant or populated
  • Dragging a meta-box out of bounds causes it to be clipped (overflow hidden?)

Attachments (2)

jjj-2026-03-24-at-16-24-54-UTC@2x.png (209.2 KB ) - added by johnjamesjacoby 6 months ago.
jjj-2026-03-24-at-16-38-44-UTC@2x.png (124.1 KB ) - added by johnjamesjacoby 6 months ago.
Clipped while dragging

Download all attachments as: .zip

Change History (9)

#1 @joedolson
6 months ago

  • Keywords needs-patch admin-reskin added

@johnjamesjacoby
6 months ago

Clipped while dragging

This ticket was mentioned in PR #11824 on WordPress/wordpress-develop by @arkaprabhachowdhury.


4 months ago
#2

  • Keywords has-patch added; needs-patch removed

## Summary

  • normalize dashboard widget drop-zone outlines while dragging
  • reduce the oversized empty-column spacing so vacant and populated columns feel more consistent
  • allow dragged dashboard widgets to extend beyond the wrapper without being clipped

## Testing Instructions

  1. Open /wp-admin/index.php on a wide desktop viewport so the Dashboard uses multiple columns.
  2. Ensure there is an empty dashboard widget column.
  3. Drag a widget into and across the empty column.
  4. Confirm the drop zones use consistent dashed outlines, the vacant column spacing feels closer to populated columns, and the dragged widget is not clipped while moving.

@arkaprabhachowdhury commented on PR #11824:


4 months ago
#3

Closing this draft in favor of a replacement PR from the renamed branch .

This ticket was mentioned in PR #11825 on WordPress/wordpress-develop by @arkaprabhachowdhury.


4 months ago
#4

## Summary

  • normalize dashboard widget drop-zone outlines while dragging
  • reduce the oversized empty-column spacing so vacant and populated columns feel more consistent
  • allow dragged dashboard widgets to extend beyond the wrapper without being clipped

## Testing Instructions

  1. Open /wp-admin/index.php on a wide desktop viewport so the Dashboard uses multiple columns.
  2. Ensure there is an empty dashboard widget column.
  3. Drag a widget into and across the empty column.
  4. Confirm the drop zones use consistent dashed outlines, the vacant column spacing feels closer to populated columns, and the dragged widget is not clipped while moving.

#5 @audrasjb
4 months ago

Removing trunk version as this is not going to be shipped with WP 7.0 but in the next releases.

#6 @audrasjb
4 months ago

  • Version trunk

#7 @arkaprabhachowdhury
3 weeks ago

Opened [PR #11825](https://github.com/WordPress/wordpress-develop/pull/11825) to address this ticket. Summary - normalize dashboard widget drop-zone outlines while dragging - reduce the oversized empty-column spacing so vacant and populated columns feel more consistent - allow dragged dashboard widgets to extend beyond the wrapper without being clipped Testing Instructions 1. Open /wp-admin/index.php on a wide desktop viewport so the Dashboard uses multiple columns. 2. Ensure there is an empty dashboard widget column. 3. Drag a widget into and across the empty column. 4. Confirm the drop zones The PR includes focused regression coverage, and its validation details are recorded in the PR description.

I picked this up because the ticket describes a concrete core behavior or edge case that remains relevant in current WordPress. The proposed change is intentionally scoped to the ticket and is submitted here for code review, with the technical discussion remaining on this ticket.

Note: See TracTickets for help on using tickets.