[#74195] Fix incorrect indentation on drag preview

Adds an optional `mirrorContainer` target to the drag-and-drop
controller. When present, the dragula mirror (drag preview) is
inserted into that element instead of `document.body`, so it
inherits the container's padding and alignment.

The Backlog inbox wires its own list element as both `container` and
`mirrorContainer`, which keeps the dragged card visually aligned
with the rest of the inbox rather than jumping to the page edge.

https://community.openproject.org/wp/74195

Author: myabc

frontend/src/stimulus/controllers/dynamic/generic-drag-and-drop.controller.spec.ts

@@ -70,6 +70,14 @@ describe('GenericDragAndDropController', () => {
     return ariaPressedTarget.call(controller, el);
   }
 
+  function callResolveMirrorContainer():Element {
+    const resolveMirrorContainer = Reflect.get(controller, 'resolveMirrorContainer') as (
+      this:GenericDragAndDropController
+    ) => Element;
+
+    return resolveMirrorContainer.call(controller);
+  }
+
   describe('canStartDrag', () => {
     it('allows dragging a draggable row in handle-less mode', () => {
       const row = draggableRow();
@@ -147,4 +155,21 @@ describe('GenericDragAndDropController', () => {
       expect(callAriaPressedTarget(row)).toBe(handle);
     });
   });
+
+  describe('resolveMirrorContainer', () => {
+    it('returns the configured mirror container target when present', () => {
+      const mirrorContainer = document.createElement('div');
+
+      Object.defineProperty(controller, 'hasMirrorContainerTarget', { value: true, configurable: true });
+      Object.defineProperty(controller, 'mirrorContainerTarget', { value: mirrorContainer, configurable: true });
+
+      expect(callResolveMirrorContainer()).toBe(mirrorContainer);
+    });
+
+    it('falls back to document.body when no mirror container target exists', () => {
+      Object.defineProperty(controller, 'hasMirrorContainerTarget', { value: false, configurable: true });
+
+      expect(callResolveMirrorContainer()).toBe(document.body);
+    });
+  });
 });

frontend/src/stimulus/controllers/dynamic/generic-drag-and-drop.controller.ts

@@ -43,10 +43,12 @@ interface TargetConfig {
 }
 
 export default class GenericDragAndDropController extends Controller {
-  static targets = ['container', 'scrollContainer'];
+  static targets = ['container', 'scrollContainer', 'mirrorContainer'];
 
   containerTargets:HTMLElement[];
   scrollContainerTargets:HTMLElement[];
+  declare readonly hasMirrorContainerTarget:boolean;
+  declare readonly mirrorContainerTarget:HTMLElement;
 
   static values = {
     handle: { type: Boolean, default: true },
@@ -127,6 +129,7 @@ export default class GenericDragAndDropController extends Controller {
         moves: (el, _source, handle, _sibling) => this.canStartDrag(el, handle),
         accepts: (el:Element, target:Element, source:Element, sibling:Element) => this.accepts(el, target, source, sibling),
         revertOnSpill: true, // enable reverting of elements if they are dropped outside of a valid target
+        mirrorContainer: this.resolveMirrorContainer(),
       },
     )
       .on('drag', (el, source) => {
@@ -252,6 +255,10 @@ export default class GenericDragAndDropController extends Controller {
     return container;
   }
 
+  private resolveMirrorContainer():Element {
+    return this.hasMirrorContainerTarget ? this.mirrorContainerTarget : document.body;
+  }
+
   // Returns the data-draggable-id of the element preceding el in its container,
   // or null if el is the first item (signals "move to top").
   private resolveTargetPrevious(el:Element):string|null {

modules/backlogs/app/components/backlogs/inbox_component.rb

@@ -93,7 +93,7 @@ def middle_count
 
     def drop_target_config
       {
-        generic_drag_and_drop_target: "container",
+        generic_drag_and_drop_target: "container mirrorContainer",
         target_container_accessor: ":scope > ul",
         target_id: "inbox",
         target_allowed_drag_type: "story"

modules/backlogs/spec/requests/backlogs/backlog_spec.rb

@@ -106,6 +106,14 @@
           expect(response.body).to include('id="sprint_backlogs_container"')
         end
       end
+
+      it "uses the inbox border box as the drag mirror container" do
+        get "/projects/#{project.identifier}/backlogs/backlog", headers: { "Turbo-Frame" => "backlogs_container" }
+
+        expect(response).to have_http_status(:ok)
+        expect(response.body).to include(%(id="inbox_#{project.id}"))
+        expect(response.body).to include('data-generic-drag-and-drop-target="container mirrorContainer"')
+      end
     end
   end