From 382b6ae56bcfe58eec18f0acbb3cc381251e47af Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Fri, 20 Jun 2025 19:52:57 +0200
Subject: [PATCH 1/2] [devtools] panel ui responsiveness

---
 .../devtools-panel/devtools-panel.tsx         | 36 +++++++++++++++----
 .../errors/dev-tools-indicator/draggable.tsx  |  3 +-
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx
index 1c885ed9f4d9..06b3d0ec7fdd 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx
@@ -72,6 +72,7 @@ export function DevToolsPanel({
         onClick={onCloseDevToolsPanel}
       />
       <Draggable
+        data-nextjs-devtools-panel-draggable
         padding={INDICATOR_PADDING}
         onDragStart={() => {}}
         position={state.devToolsPosition}
@@ -160,6 +161,28 @@ export const DEVTOOLS_PANEL_STYLES = css`
     margin: auto;
     /* TODO: This is for fullscreen mode. */
     /* top: 10vh; */
+
+    width: 100%;
+
+    @media (min-width: 576px) {
+      max-width: 540px;
+    }
+
+    @media (min-width: 768px) {
+      max-width: 720px;
+    }
+
+    @media (min-width: 992px) {
+      max-width: 960px;
+    }
+
+    @media (min-width: 1200px) {
+      max-width: 1140px;
+    }
+
+    @media (min-width: 1440px) {
+      max-width: 1200px;
+    }
   }
 
   [data-nextjs-devtools-panel-overlay-backdrop] {
@@ -167,6 +190,11 @@ export const DEVTOOLS_PANEL_STYLES = css`
     opacity: 0;
   }
 
+  [data-nextjs-devtools-panel-draggable] {
+    /* For responsiveness */
+    width: 100%;
+  }
+
   [data-nextjs-devtools-panel-dialog] {
     -webkit-font-smoothing: antialiased;
     display: flex;
@@ -178,12 +206,8 @@ export const DEVTOOLS_PANEL_STYLES = css`
     box-shadow: var(--shadow-lg);
     position: relative;
     overflow-y: auto;
-
-    /* TODO: Remove once the content is filled. */
-    min-width: 800px;
-    min-height: 500px;
-    /* This is handled from dialog/styles.ts */
-    max-width: var(--next-dialog-max-width);
+    width: 100%;
+    max-height: 50vh;
   }
 
   [data-nextjs-devtools-panel-header] {
diff --git a/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/draggable.tsx b/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/draggable.tsx
index c2d1253d93ff..140e21207d7c 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/draggable.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/draggable.tsx
@@ -17,6 +17,7 @@ export function Draggable({
   position: currentCorner,
   setPosition: setCurrentCorner,
   onDragStart,
+  ...props
 }: {
   children: React.ReactElement
   position: Corners
@@ -121,7 +122,7 @@ export function Draggable({
   }
 
   return (
-    <div ref={ref} {...drag} style={{ touchAction: 'none' }}>
+    <div {...props} ref={ref} {...drag} style={{ touchAction: 'none' }}>
       {children}
     </div>
   )

From 9792646c5fb70c3226624b21e8f16634bb366f6f Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Sun, 22 Jun 2025 21:48:57 +0200
Subject: [PATCH 2/2] add min width and minimum left right

---
 .../components/devtools-panel/devtools-panel.tsx   | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx
index 06b3d0ec7fdd..16c4d99ece58 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx
@@ -162,7 +162,10 @@ export const DEVTOOLS_PANEL_STYLES = css`
     /* TODO: This is for fullscreen mode. */
     /* top: 10vh; */
 
-    width: 100%;
+    @media (max-width: 575px) {
+      left: 20px !important;
+      right: 20px !important;
+    }
 
     @media (min-width: 576px) {
       max-width: 540px;
@@ -175,14 +178,6 @@ export const DEVTOOLS_PANEL_STYLES = css`
     @media (min-width: 992px) {
       max-width: 960px;
     }
-
-    @media (min-width: 1200px) {
-      max-width: 1140px;
-    }
-
-    @media (min-width: 1440px) {
-      max-width: 1200px;
-    }
   }
 
   [data-nextjs-devtools-panel-overlay-backdrop] {
@@ -208,6 +203,7 @@ export const DEVTOOLS_PANEL_STYLES = css`
     overflow-y: auto;
     width: 100%;
     max-height: 50vh;
+    min-height: 450px;
   }
 
   [data-nextjs-devtools-panel-header] {