[devtools] proper draggable for header and footer only

Author: devjiwonchoi

packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-footer.tsx

@@ -51,6 +51,17 @@ export const DEVTOOLS_PANEL_FOOTER_STYLES = css`
     align-items: center;
     border-top: 1px solid var(--color-gray-400);
     border-radius: 0 0 var(--rounded-xl) var(--rounded-xl);
+
+    /* For draggable */
+    cursor: move;
+    user-select: none;
+
+    /* Reset for children */
+    & * {
+      cursor: auto;
+      /* user-select: auto; seems to not restore properly */
+      user-select: text;
+    }
   }
 
   [data-nextjs-devtools-panel-footer-tab-group] {

packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx

@@ -87,6 +87,7 @@ export function DevToolsPanel({
             devToolsPosition: p,
           })
         }}
+        dragHandleSelector="[data-nextjs-devtools-panel-header], [data-nextjs-devtools-panel-footer]"
       >
         <>
           <Dialog
@@ -267,6 +268,16 @@ export const DEVTOOLS_PANEL_STYLES = css`
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid var(--color-gray-400);
+
+    /* For draggable */
+    cursor: move;
+    user-select: none;
+    /* Reset for children */
+    & * {
+      cursor: auto;
+      /* user-select: auto; seems to not restore properly */
+      user-select: text;
+    }
   }
 
   [data-nextjs-devtools-panel-header-tab-group] {
@@ -324,7 +335,7 @@ export const DEVTOOLS_PANEL_STYLES = css`
   [data-nextjs-devtools-panel-header-action-button] {
     background: transparent;
     border: none;
-    cursor: pointer;
+    cursor: pointer !important;
     display: flex;
     align-items: center;
     justify-content: center;

packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/draggable.tsx

@@ -17,19 +17,22 @@ export function Draggable({
   position: currentCorner,
   setPosition: setCurrentCorner,
   onDragStart,
+  dragHandleSelector,
   ...props
 }: {
   children: React.ReactElement
   position: Corners
   padding: number
   setPosition: (position: Corners) => void
   onDragStart?: () => void
+  dragHandleSelector?: string
 }) {
   const { ref, animate, ...drag } = useDrag({
     threshold: 5,
     onDragStart,
     onDragEnd,
     onAnimationEnd,
+    dragHandleSelector,
   })
 
   function onDragEnd(translation: Point, velocity: Point) {
@@ -134,6 +137,7 @@ interface UseDragOptions {
   onDragEnd?: (translation: Point, velocity: Point) => void
   onAnimationEnd?: (corner: Corner) => void
   threshold: number // Minimum movement before drag starts
+  dragHandleSelector?: string
 }
 
 interface Velocity {
@@ -185,10 +189,31 @@ export function useDrag(options: UseDragOptions) {
     }
   }
 
+  function isValidDragHandle(target: EventTarget | null): boolean {
+    if (!options.dragHandleSelector || !ref.current || !target) {
+      return true // If no selector provided, entire element is draggable
+    }
+
+    const element = target as Element
+    if (!element.matches) {
+      return false
+    }
+
+    // Check if the target element directly matches the drag handle selector
+    // This excludes children elements, only allowing drag from the exact element
+    return element.matches(options.dragHandleSelector)
+  }
+
   function onPointerDown(e: React.PointerEvent) {
     if (e.button !== 0) {
       return // ignore right click
     }
+
+    // Check if the pointer down event is on a valid drag handle
+    if (!isValidDragHandle(e.target)) {
+      return
+    }
+
     origin.current = { x: e.clientX, y: e.clientY }
     state.current = 'press'
     window.addEventListener('pointermove', onPointerMove)