[dev-overlay] Polish mobile view (#78863)

Just making the mobile experience a bit better by removing notch design
to make better use of constrained space.


![image](https://github.com/user-attachments/assets/40339401-7b2b-41c5-9a72-7cf3ce3746d7)

Author: raunofreiberg

packages/next/src/client/components/react-dev-overlay/ui/components/dialog/styles.ts

@@ -71,6 +71,10 @@ const styles = `
     transition: opacity var(--transition-duration) var(--timing-overlay);
   }
 
+  [data-nextjs-dialog-overlay] {
+    margin: 8px;
+  }
+
   [data-nextjs-dialog-overlay][data-rendered='true']
     [data-nextjs-dialog-backdrop] {
     opacity: 1;

packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay-nav/error-overlay-nav.tsx

@@ -47,6 +47,8 @@ export function ErrorOverlayNav({
 
 export const styles = `
   [data-nextjs-error-overlay-nav] {
+    --stroke-color: var(--color-gray-400);
+    --background-color: var(--color-background-100);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -56,25 +58,22 @@ export const styles = `
     position: relative;
     z-index: 2;
     outline: none;
-    translate: 1px 1px;
+    translate: var(--next-dialog-border-width) var(--next-dialog-border-width);
     max-width: var(--next-dialog-max-width);
 
     .error-overlay-notch {
-      --stroke-color: var(--color-gray-400);
-      --background-color: var(--color-background-100);
-
-      translate: -1px 0;
+      translate: calc(var(--next-dialog-border-width) * -1);
       width: auto;
       height: var(--next-dialog-notch-height);
       padding: 12px;
       background: var(--background-color);
-      border: 1px solid var(--stroke-color);
+      border: var(--next-dialog-border-width) solid var(--stroke-color);
       border-bottom: none;
       position: relative;
 
       &[data-side='left'] {
         padding-right: 0;
-        border-radius: var(--rounded-xl) 0 0 0;
+        border-radius: var(--next-dialog-radius) 0 0 0;
 
         .error-overlay-notch-tail {
           right: -54px;
@@ -87,7 +86,7 @@ export const styles = `
 
       &[data-side='right'] {
         padding-left: 0;
-        border-radius: 0 var(--rounded-xl) 0 0;
+        border-radius: 0 var(--next-dialog-radius) 0 0;
 
         .error-overlay-notch-tail {
           left: -54px;
@@ -101,10 +100,34 @@ export const styles = `
 
       .error-overlay-notch-tail {
         position: absolute;
-        top: -1px;
+        top: calc(var(--next-dialog-border-width) * -1);
         pointer-events: none;
         z-index: -1;
-        height: calc(100% + 1px);
+        height: calc(100% + var(--next-dialog-border-width));
+      }
+    }
+  }
+
+  @media (max-width: 600px) {
+    [data-nextjs-error-overlay-nav] {
+      background: var(--background-color);
+      border-radius: var(--next-dialog-radius) var(--next-dialog-radius) 0 0;
+      border: var(--next-dialog-border-width) solid var(--stroke-color);
+      border-bottom: none;
+      overflow: hidden;
+      translate: 0 var(--next-dialog-border-width);
+      
+      .error-overlay-notch {
+        border-radius: 0;
+        border: 0;
+
+        &[data-side="left"], &[data-side="right"] {
+          border-radius: 0;
+        }
+
+        .error-overlay-notch-tail {
+          display: none;
+        }
       }
     }
   }