[devtools] fullscreen mode should not be draggable

Author: devjiwonchoi

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

@@ -7,14 +7,19 @@ import { css } from '../../utils/css'
 
 export function DevToolsPanelFooter({
   versionInfo,
+  isDraggable,
 }: {
   versionInfo: OverlayState['versionInfo']
+  isDraggable: boolean
 }) {
   const bundlerName = (
     process.env.__NEXT_BUNDLER || 'WEBPACK'
   ).toUpperCase() as 'WEBPACK' | 'TURBOPACK' | 'RSPACK'
   return (
-    <div data-nextjs-devtools-panel-footer>
+    <div
+      data-nextjs-devtools-panel-footer
+      data-nextjs-devtools-panel-draggable={isDraggable}
+    >
       <div data-nextjs-devtools-panel-footer-tab-group>
         <DevToolsPanelVersionInfo versionInfo={versionInfo} />
         <div data-nextjs-devtools-panel-footer-tab>
@@ -51,15 +56,6 @@ 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;
-    & > * {
-      cursor: auto;
-      /* user-select: auto; follows the parent (parent none -> child none), so reset the direct child to text */
-      user-select: text;
-    }
   }
 
   [data-nextjs-devtools-panel-footer-tab-group] {

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

@@ -98,6 +98,7 @@ export function DevToolsPanel({
           })
         }}
         dragHandleSelector="[data-nextjs-devtools-panel-header], [data-nextjs-devtools-panel-footer]"
+        disableDrag={isFullscreen}
       >
         <>
           <Dialog
@@ -108,7 +109,10 @@ export function DevToolsPanel({
           >
             <DialogContent data-nextjs-devtools-panel-dialog-content>
               <DialogHeader data-nextjs-devtools-panel-dialog-header>
-                <div data-nextjs-devtools-panel-header>
+                <div
+                  data-nextjs-devtools-panel-header
+                  data-nextjs-devtools-panel-draggable={!isFullscreen}
+                >
                   <div data-nextjs-devtools-panel-header-tab-group>
                     <button
                       data-nextjs-devtools-panel-header-tab={
@@ -175,7 +179,10 @@ export function DevToolsPanel({
                 />
               </DialogBody>
             </DialogContent>
-            <DevToolsPanelFooter versionInfo={state.versionInfo} />
+            <DevToolsPanelFooter
+              versionInfo={state.versionInfo}
+              isDraggable={!isFullscreen}
+            />
           </Dialog>
         </>
       </Draggable>
@@ -261,15 +268,6 @@ 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;
-    & > * {
-      cursor: auto;
-      /* user-select: auto; follows the parent (parent none -> child none), so reset the direct child to text */
-      user-select: text;
-    }
   }
 
   [data-nextjs-devtools-panel-header-tab-group] {
@@ -345,4 +343,14 @@ export const DEVTOOLS_PANEL_STYLES = css`
       background-color: var(--color-gray-300);
     }
   }
+
+  [data-nextjs-devtools-panel-draggable='true'] {
+    cursor: move;
+    user-select: none;
+    & > * {
+      cursor: auto;
+      /* user-select: auto; follows the parent (parent none -> child none), so reset the direct child to text */
+      user-select: text;
+    }
+  }
 `

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

@@ -18,6 +18,7 @@ export function Draggable({
   setPosition: setCurrentCorner,
   onDragStart,
   dragHandleSelector,
+  disableDrag,
   ...props
 }: {
   children: React.ReactElement
@@ -26,6 +27,7 @@ export function Draggable({
   setPosition: (position: Corners) => void
   onDragStart?: () => void
   dragHandleSelector?: string
+  disableDrag?: boolean
 }) {
   const { ref, animate, ...drag } = useDrag({
     threshold: 5,
@@ -35,6 +37,10 @@ export function Draggable({
     dragHandleSelector,
   })
 
+  if (disableDrag) {
+    return children
+  }
+
   function onDragEnd(translation: Point, velocity: Point) {
     const projectedPosition = {
       x: translation.x + project(velocity.x),