[dev-overlay] Increase padding if no x button present (#76898)

Fixes lack of padding on the right if there is no `x` close button ![CleanShot 2025-03-07 at 14 11 57@2x](https://github.com/user-attachments/assets/2543855f-bb6b-4179-9e21-3808bc99e19b) After the changes: ![CleanShot 2025-03-07 at 14 12 33@2x](https://github.com/user-attachments/assets/c369963a-d621-4fc6-b6d6-fcf0888dca69) --- Closes DSN-756
vercel · Mar 7, 2025 · 24c480e · 24c480e
1 parent 8ea354c
commit 24c480e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/...ts/react-dev-overlay/ui/storybook/app.png → ...t/components/react-dev-overlay/ui/app.png b/...ts/react-dev-overlay/ui/storybook/app.png → ...t/components/react-dev-overlay/ui/app.png
diff --git a/...lient/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.tsx b/...lient/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.tsx
@@ -190,11 +190,12 @@ export const NextLogo = forwardRef(function NextLogo(
           }
 
           [data-issues] {
+            --padding-left: 8px;
             display: flex;
             gap: 2px;
             align-items: center;
             padding-left: 8px;
-            padding-right: ${isBuildError ? '8px' : 'calc(2px * 2)'};
+            padding-right: 8px;
             height: var(--size-32);
             margin: 0 2px;
             border-radius: var(--rounded-full);
@@ -204,6 +205,10 @@ export const NextLogo = forwardRef(function NextLogo(
               background: var(--color-hover-alpha-error);
             }
 
+            &:has([data-issues-collapse]) {
+              padding-right: calc(var(--padding-left) / 2);
+            }
+
             [data-cross] {
               translate: 0px -1px;
             }

diff --git a/packages/next/src/client/components/react-dev-overlay/ui/dev-overlay.stories.tsx b/packages/next/src/client/components/react-dev-overlay/ui/dev-overlay.stories.tsx
@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import type { OverlayState } from '../shared'
 
+// @ts-expect-error
+import imgApp from './app.png'
+
 import { useState } from 'react'
 import { DevOverlay } from './dev-overlay'
 import { ACTION_UNHANDLED_ERROR } from '../shared'
@@ -84,11 +87,22 @@ export const Default: Story = {
   render: function DevOverlayStory() {
     const [isErrorOverlayOpen, setIsErrorOverlayOpen] = useState(true)
     return (
-      <DevOverlay
-        state={state}
-        isErrorOverlayOpen={isErrorOverlayOpen}
-        setIsErrorOverlayOpen={setIsErrorOverlayOpen}
-      />
+      <>
+        <img
+          src={imgApp}
+          style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'contain',
+            filter: 'invert(1)',
+          }}
+        />
+        <DevOverlay
+          state={state}
+          isErrorOverlayOpen={isErrorOverlayOpen}
+          setIsErrorOverlayOpen={setIsErrorOverlayOpen}
+        />
+      </>
     )
   },
 }