Trac #65151: Fix dashboard widget drag-and-drop glitch

[kabir-coderex]

Description

This PR resolves the glitchy drag-and-drop behavior encountered when rearranging widgets on the WordPress admin dashboard. Specifically, it fixes the layout calculations, visibility degradation, and viewport clipping that occur when dragging widgets across uneven columns or when the action requires page scrolling.

Problems Addressed

1. Drop indicator missing past the end of a short column: The placeholder only appears where the dragged widget overlaps a .meta-box-sortables drop area. Because each column is only as tall as its own widgets, dragging a widget toward a shorter column (or below its last widget) left no droppable region, so no placeholder appeared even though the drop itself worked.
2. Placeholder hard to see / inconsistently styled: The placeholder rule used :not(.empty-container .sortable-placeholder) — a :not() containing a descendant combinator. In engines without full Selectors Level 4 :not() support, the entire rule is dropped, leaving the placeholder unstyled (an invisible gap). Even when applied, it was a faint 1px light-grey outline with no fill.
3. Helper/placeholder clipped while scroll-dragging: #dashboard-widgets-wrap used overflow: hidden (only to contain floated columns), which clipped the absolutely-positioned sortable helper when it left the wrap bounds during scroll-drags, and could be picked up as the drag scrollParent, skewing placeholder position math.
4. Empty-column hint floated to mid-column: The "Drag boxes here" text was vertically centered (top: 50%) inside a full-height empty column, pushing it far down the page.

Changes

• src/js/_enqueues/admin/postbox.js — On drag start, equalize all Dashboard .meta-box-sortables drop areas to the tallest column's height (cleared on stop), so a widget can be dropped anywhere in any column. refreshPositions() (already called in start) re-caches the new heights for jQuery UI's intersection checks. Scoped to #dashboard-widgets so the post-edit screen is unaffected.
• src/wp-admin/css/common.css — Made the .sortable-placeholder reliably visible (2px dashed theme color + subtle fill) and split the empty-container exception into its own simple rule instead of a fragile :not() with a descendant combinator, so the placeholder styles can't be silently dropped.
• src/wp-admin/css/dashboard.css — Replaced overflow: hidden on #dashboard-widgets-wrap with display: flow-root (contains the floated columns without clipping the drag helper), and top-aligned the empty-column "Drag boxes here" hint instead of vertically centering it.

Trac ticket: https://core.trac.wordpress.org/ticket/65151

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 4.8
Used for: Diagnosing the root causes and drafting the CSS/JS changes. All changes were reviewed, tested in a local develop build, and edited by me.

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props kabir93.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.