[DevOverlay] Fix Style Regression (#74768)

### Why? There were regressions in both the `floating-header` story and the dialog border. ### Before ![CleanShot 2025-01-11 at 05 51 51](https://github.com/user-attachments/assets/1362b8ed-1ecc-4232-b5a8-a089865e2eae) ### After ![CleanShot 2025-01-11 at 05 51 44](https://github.com/user-attachments/assets/c3d60aae-24f8-45bc-8e30-e3695fa132f8) ### Floating Header Story This was invisible due to `translateY`. ![CleanShot 2025-01-11 at 05 49 59](https://github.com/user-attachments/assets/ce2e5abd-8c80-4035-b62a-474ece2dab00) Closes NDX-654
vercel · Jan 13, 2025 · 9fd30a5 · 9fd30a5
1 parent 61b4a74
commit 9fd30a5
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 26 deletions.
diff --git a/...rc/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts b/...rc/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts
@@ -9,9 +9,8 @@ const styles = css`
     max-height: calc(100% - 56px);
     margin-right: auto;
     margin-left: auto;
-
-    z-index: 50;
     outline: none;
+    overflow-y: hidden;
   }
 
   @media (max-height: 812px) {

diff --git a/...t/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog.tsx b/...t/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog.tsx
@@ -31,7 +31,6 @@ export const DIALOG_STYLES = css`
     border: 1px solid var(--color-gray-400);
     border-radius: var(--rounded-xl);
     box-shadow: var(--shadow-md);
-    position: relative;
   }
 
   .nextjs-error-overlay-dialog-turbopack-background {

diff --git a/...al/internal/components/Errors/error-overlay-bottom-stacks/error-overlay-bottom-stacks.tsx b/...al/internal/components/Errors/error-overlay-bottom-stacks/error-overlay-bottom-stacks.tsx
@@ -38,10 +38,8 @@ export const styles = css`
     flex-direction: column;
     width: 100%;
     outline: none;
-    position: absolute;
-    bottom: -10px;
     z-index: -1;
-
+    position: fixed;
     @media (min-width: 576px) {
       max-width: 540px;
     }
@@ -57,26 +55,24 @@ export const styles = css`
 
   .error-overlay-bottom-stack-1,
   .error-overlay-bottom-stack-2 {
-    padding: 12px;
+    padding: var(--size-3);
     align-self: center;
     border: 1px solid var(--color-gray-400);
     border-radius: var(--rounded-xl);
     box-shadow: var(--shadow-md);
     background: var(--color-background-200);
     animation: stack-slide-down 0.3s ease-out forwards;
-    transform-origin: top center;
-    position: relative;
   }
 
   .error-overlay-bottom-stack-1 {
-    width: calc(100% - 24px);
+    width: calc(100% - var(--size-6));
+    margin-top: calc(-1 * var(--size-3));
   }
 
   .error-overlay-bottom-stack-2 {
+    width: calc(100% - var(--size-12));
+    margin-top: calc(-1 * var(--size-3_5));
     z-index: -2;
-    position: absolute;
-    top: 10px;
-    width: calc(100% - 48px);
   }
 
   @keyframes stack-slide-down {

diff --git a/...components/Errors/error-overlay-floating-header/error-overlay-floating-header.stories.tsx b/...components/Errors/error-overlay-floating-header/error-overlay-floating-header.stories.tsx
@@ -41,4 +41,17 @@ export const Default: Story = {
       staleness: 'stale-major',
     },
   },
+  parameters: {
+    docs: {
+      story: { inline: true },
+    },
+  },
+  decorators: [
+    (Story) => (
+      // Offset the translateY applied to the floating header.
+      <div style={{ paddingTop: 'var(--size-10_5)' }}>
+        <Story />
+      </div>
+    ),
+  ],
 }
diff --git a/...nternal/components/Errors/error-overlay-floating-header/error-overlay-floating-header.tsx b/...nternal/components/Errors/error-overlay-floating-header/error-overlay-floating-header.tsx
@@ -43,8 +43,8 @@ export const styles = css`
     align-items: center;
 
     width: 100%;
-    position: absolute;
-    transform: translateY(-42px);
+    position: fixed;
+    transform: translateY(calc(-1 * var(--size-10_5)));
 
     outline: none;
 

diff --git a/...ay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx b/...ay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx
@@ -71,14 +71,15 @@ export function ErrorOverlayLayout({
   return (
     <Overlay fixed={isBuildError}>
       <ErrorOverlayDialog onClose={onClose} isTurbopack={isTurbopack}>
-        <ErrorOverlayFloatingHeader
-          readyErrors={readyErrors}
-          activeIdx={activeIdx}
-          setActiveIndex={setActiveIndex}
-          versionInfo={versionInfo}
-          isTurbopack={isTurbopack}
-        />
         <DialogContent>
+          <ErrorOverlayFloatingHeader
+            readyErrors={readyErrors}
+            activeIdx={activeIdx}
+            setActiveIndex={setActiveIndex}
+            versionInfo={versionInfo}
+            isTurbopack={isTurbopack}
+          />
+
           <ErrorOverlayDialogHeader isTurbopack={isTurbopack}>
             <div
               className="nextjs__container_errors__error_title"
@@ -99,12 +100,12 @@ export function ErrorOverlayLayout({
               footerMessage={footerMessage}
               errorCode={errorCode!}
             />
+            <ErrorOverlayBottomStacks
+              errorsCount={readyErrors?.length ?? 0}
+              activeIdx={activeIdx ?? 0}
+            />
           </DialogFooter>
         </DialogContent>
-        <ErrorOverlayBottomStacks
-          errorsCount={readyErrors?.length ?? 0}
-          activeIdx={activeIdx ?? 0}
-        />
       </ErrorOverlayDialog>
     </Overlay>
   )

diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/Base.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/Base.tsx
@@ -79,12 +79,22 @@ export function Base() {
           --size-3: 0.75rem; /* 12px */
           --size-3_5: 0.875rem; /* 14px */
           --size-4: 1rem; /* 16px */
+          --size-4_5: 1.125rem; /* 18px */
           --size-5: 1.25rem; /* 20px */
+          --size-5_5: 1.375rem; /* 22px */
           --size-6: 1.5rem; /* 24px */
+          --size-6_5: 1.625rem; /* 26px */
           --size-7: 1.75rem; /* 28px */
+          --size-7_5: 1.875rem; /* 30px */
           --size-8: 2rem; /* 32px */
+          --size-8_5: 2.125rem; /* 34px */
           --size-9: 2.25rem; /* 36px */
+          --size-9_5: 2.375rem; /* 38px */
           --size-10: 2.5rem; /* 40px */
+          --size-10_5: 2.625rem; /* 42px */
+          --size-11: 2.75rem; /* 44px */
+          --size-11_5: 2.875rem; /* 46px */
+          --size-12: 3rem; /* 48px */
         }
 
         @media (prefers-color-scheme: dark) {