[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

Author: raunofreiberg

packages/next/src/client/components/react-dev-overlay/ui/storybook/app.png renamed to packages/next/src/client/components/react-dev-overlay/ui/app.png

@@ -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;
             }

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.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}
+        />
+      </>
     )
   },
 }