From 24c480e33bea4565630be1860a5ba71d08981b28 Mon Sep 17 00:00:00 2001
From: rauno <freiberggg@gmail.com>
Date: Fri, 7 Mar 2025 14:48:08 +0200
Subject: [PATCH] [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
---
 .../ui/{storybook => }/app.png                | Bin
 .../errors/dev-tools-indicator/next-logo.tsx  |   7 ++++-
 .../ui/dev-overlay.stories.tsx                |  24 ++++++++++++++----
 3 files changed, 25 insertions(+), 6 deletions(-)
 rename packages/next/src/client/components/react-dev-overlay/ui/{storybook => }/app.png (100%)

diff --git a/packages/next/src/client/components/react-dev-overlay/ui/storybook/app.png b/packages/next/src/client/components/react-dev-overlay/ui/app.png
similarity index 100%
rename from packages/next/src/client/components/react-dev-overlay/ui/storybook/app.png
rename to packages/next/src/client/components/react-dev-overlay/ui/app.png
diff --git a/packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.tsx b/packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.tsx
index 2e351f33a466a..df445e17b894c 100644
--- a/packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.tsx
+++ b/packages/next/src/client/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
index 0f5884aa3a2ad..d51f5db146981 100644
--- 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}
+        />
+      </>
     )
   },
 }