[AGILE-152] Improve backlogs drag and drop

frontend/package.json

@@ -79,6 +79,8 @@
     "@appsignal/javascript": "^1.6.1",
     "@appsignal/plugin-breadcrumbs-console": "^1.1.37",
     "@appsignal/plugin-breadcrumbs-network": "^1.1.24",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.7.10",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
     "@blocknote/core": "^0.44.2",
     "@blocknote/mantine": "^0.44.2",
     "@blocknote/react": "^0.44.2",
@@ -89,11 +91,11 @@
     "@fullcalendar/common": "^5.11.5",
     "@fullcalendar/core": "^6.1.20",
     "@fullcalendar/daygrid": "^6.1.20",
-    "@fullcalendar/multimonth": "^6.1.20",
     "@fullcalendar/interaction": "^6.1.20",
     "@fullcalendar/list": "^6.1.20",
     "@fullcalendar/moment": "^6.1.20",
     "@fullcalendar/moment-timezone": "^6.1.20",
+    "@fullcalendar/multimonth": "^6.1.20",
     "@fullcalendar/resource": "^6.1.20",
     "@fullcalendar/resource-common": "^5.11.5",
     "@fullcalendar/resource-timeline": "^6.1.20",

frontend/src/assets/sass/backlogs/_master_backlog.sass

@@ -67,16 +67,13 @@ $op-backlogs-header--points-min-width-narrow: 2rem
 
 .op-backlogs-story
   display: grid
-  grid-template-columns: var(--control-xsmall-size) 1fr minmax($op-backlogs-header--points-min-width, max-content) auto
+  grid-template-columns: 1fr minmax($op-backlogs-header--points-min-width, max-content) auto
   grid-template-rows: auto auto
-  grid-template-areas: "drag_handle info_line points menu" ". subject subject subject"
+  grid-template-areas: "info_line points menu" "subject subject subject"
   align-items: center
   margin-top: calc(-1 * var(--base-size-4))
   margin-bottom: var(--base-size-4)
 
-.op-backlogs-story--drag_handle_button
-  padding: var(--base-size-4)
-
 .op-backlogs-story--points
   margin-left: var(--stack-gap-normal)
   font-variant-numeric: tabular-nums
@@ -168,7 +165,7 @@ $op-backlogs-header--points-min-width-narrow: 2rem
     display: none
 
   .op-backlogs-story
-    grid-template-columns: var(--control-xsmall-size) 1fr minmax($op-backlogs-header--points-min-width-narrow, max-content) auto
+    grid-template-columns: 1fr minmax($op-backlogs-header--points-min-width-narrow, max-content) auto
 
   .op-backlogs-container, .op-sprint-planning-container
     height: unset

frontend/src/global_styles/primer/_overrides.sass

@@ -164,11 +164,15 @@ ul.SegmentedControl,
   &:focus-visible
     background-color: var(--bgColor-accent-muted)
 
-.Box-row--clickable
+.Box-row:is(.Box-row--clickable)
   cursor: pointer
 
 .Box-row:is(.Box-row--draggable)
-  padding-left: 0
+  cursor: grab
+
+.is-dnd-busy
+  .Box-row:is(.Box-row--draggable)
+    cursor: progress
 
 // Apply the mobile styles as soon as the banner itself is small
 // Styles are copied from the PVC repo