Loading
Position the label drag clone under the cursor
What does this MR do and why?
Positions the prioritized-label drag clone under the cursor. The panel layout's content wrapper carries contain: layout (app/assets/stylesheets/layouts/panel.scss), which makes it the containing block for the position: fixed fallback clone SortableJS creates, while Sortable computes viewport coordinates and only compensates for transform ancestors. The clone therefore renders offset from the pointer by the panel's origin (about +240px right, +48px down). Moving the clone onto body with fallbackOnBody: true restores correct coordinates.
Off-panel the clone loses every panel-scoped rule, so the row layout travels on the row itself (gl-flex gl-justify-between utilities on .label-content in both templates that shared the de-scoped rule), and a clone-scoped rule hides the star-priority toggle that panel scoping hides in-list.
The clone also gets the checklist items' held-clone card treatment (highlight background, border, rounded corners, painted on a ::before overlay so the row's cloned border utilities cannot zero individual edges), per the UX review ask on the parent MR.
Split out of Suppress text selection while dragging prioritized labels (!245712) at the frontend maintainer's request for a scoped review (suggestion); commits carried over from that branch.
References
- Sortable drag clones render offset from the cursor inside the panel layout (#607347): mechanism, evidence, and the list of other exposed Sortable consumers to audit.
Screenshots or screen recordings
| Before (clone kept in the panel) | After (clone on body) |
|---|---|
Videos from the parent MR's review, captured on this change's earlier home; they show the positioning half. Captures of the card treatment follow before this leaves draft.
How to set up and validate locally
- In a project with several labels (Manage > Labels), star a few to populate Prioritized labels.
- Drag a prioritized label. Before: the floating row renders down and to the right of the pointer, as floating text. After: it rides under the pointer and reads as a lifted card, with no star toggle on the clone.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.