From 9fd30a538e46d91d915296c6aecba27bd3afa31c Mon Sep 17 00:00:00 2001 From: Jiwon Choi Date: Mon, 13 Jan 2025 08:38:59 +0800 Subject: [PATCH] [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 --- .../internal/components/Dialog/styles.ts | 3 +-- .../components/Errors/dialog/dialog.tsx | 1 - .../error-overlay-bottom-stacks.tsx | 16 +++++-------- .../error-overlay-floating-header.stories.tsx | 13 +++++++++++ .../error-overlay-floating-header.tsx | 4 ++-- .../error-overlay-layout.tsx | 23 ++++++++++--------- .../_experimental/internal/styles/Base.tsx | 10 ++++++++ 7 files changed, 44 insertions(+), 26 deletions(-) diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts index 0443abd3fa2c5..a6c15e6a67d7b 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts +++ b/packages/next/src/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/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog.tsx index 004ea166257f2..08fce3fce5d77 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog.tsx +++ b/packages/next/src/client/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/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-bottom-stacks/error-overlay-bottom-stacks.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-bottom-stacks/error-overlay-bottom-stacks.tsx index a8c422a07ccc0..4231541e286cb 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-bottom-stacks/error-overlay-bottom-stacks.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/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/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-floating-header/error-overlay-floating-header.stories.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-floating-header/error-overlay-floating-header.stories.tsx index c911f8123f635..721bfd05b935c 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-floating-header/error-overlay-floating-header.stories.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/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. +
+ +
+ ), + ], } diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-floating-header/error-overlay-floating-header.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-floating-header/error-overlay-floating-header.tsx index 456f6fdaaaf0e..1344277b95e51 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-floating-header/error-overlay-floating-header.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/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/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx index a36df4b6b12b5..998fc6a51c6b8 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx @@ -71,14 +71,15 @@ export function ErrorOverlayLayout({ return ( - + +
+ - ) 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 index 5e55f053a9763..477e99d96937c 100644 --- 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) {