fix: Use pointerWithin collision detection for cross-section tile drag

The default closestCenter collision detection picks the parent drop zone
when a tile is dragged within a section, making cross-section moves
impossible. Switch to pointerWithin which targets where the pointer
actually lands.

Also pass containerId through DragData to skip no-op drops (tile
dropped on the same section it started in).

Author: alex-fedotyev

packages/app/src/DBDashboardPage.tsx

@@ -363,6 +363,7 @@ const Tile = forwardRef(
             <TileDragHandle
               tileId={chart.id}
               tileName={chart.config.name ?? 'Tile'}
+              containerId={chart.containerId}
             />
           )}
           {(chart.config.displayType === DisplayType.Line ||

packages/app/src/components/DashboardDndContext.tsx

@@ -5,6 +5,7 @@ import {
   DragOverlay,
   DragStartEvent,
   MouseSensor,
+  pointerWithin,
   TouchSensor,
   useDraggable,
   useDroppable,
@@ -24,7 +25,12 @@ import { IconGripVertical } from '@tabler/icons-react';
 // --- Types ---
 
 export type DragData =
-  | { type: 'tile'; tileId: string; tileName: string }
+  | {
+      type: 'tile';
+      tileId: string;
+      tileName: string;
+      containerId?: string;
+    }
   | { type: 'section'; sectionId: string; sectionTitle: string };
 
 type Props = {
@@ -78,8 +84,12 @@ export function DashboardDndProvider({
       if (activeData.type === 'tile') {
         if (overId.startsWith('drop-section-')) {
           const targetId = overId.replace('drop-section-', '');
+          // Skip no-op: tile already in this section
+          if (targetId === activeData.containerId) return;
           onMoveTileToSection(activeData.tileId, targetId);
         } else if (overId === 'drop-ungrouped') {
+          // Skip no-op: tile already ungrouped
+          if (!activeData.containerId) return;
           onMoveTileToSection(activeData.tileId, undefined);
         }
         return;
@@ -104,6 +114,7 @@ export function DashboardDndProvider({
   return (
     <DndContext
       sensors={sensors}
+      collisionDetection={pointerWithin}
       onDragStart={handleDragStart}
       onDragEnd={handleDragEnd}
     >
@@ -156,13 +167,15 @@ export function DashboardDndProvider({
 export function TileDragHandle({
   tileId,
   tileName,
+  containerId,
 }: {
   tileId: string;
   tileName: string;
+  containerId?: string;
 }) {
   const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
     id: `drag-tile-${tileId}`,
-    data: { type: 'tile', tileId, tileName } satisfies DragData,
+    data: { type: 'tile', tileId, tileName, containerId } satisfies DragData,
   });
 
   return (