fix dev overlay version indicator style (#66278)

Fix the Build Error indicator location, it should be located on the top-right corner. Align the padding with ### Build Error ![image](https://github.com/vercel/next.js/assets/4800338/835506a5-bf29-4f3e-ae0e-091dc9a7b386) ### Runtime Error ![image](https://github.com/vercel/next.js/assets/4800338/2a61a933-58f2-471e-9d3f-84b3954b1460)
vercel · May 28, 2024 · 1b36d76 · 1b36d76
1 parent 1415609
commit 1b36d76
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 11 deletions.
diff --git a/...nents/react-dev-overlay/internal/components/VersionStalenessInfo/VersionStalenessInfo.tsx b/...nents/react-dev-overlay/internal/components/VersionStalenessInfo/VersionStalenessInfo.tsx
@@ -1,15 +1,18 @@
-import React from 'react'
 import type { VersionInfo } from '../../../../../../server/dev/parse-version-info'
 
-export function VersionStalenessInfo(props: VersionInfo) {
-  if (!props) return null
-  const { staleness } = props
-  let { text, indicatorClass, title } = getStaleness(props)
+export function VersionStalenessInfo({
+  versionInfo,
+}: {
+  versionInfo: VersionInfo | undefined
+}) {
+  if (!versionInfo) return null
+  const { staleness } = versionInfo
+  let { text, indicatorClass, title } = getStaleness(versionInfo)
 
   if (!text) return null
 
   return (
-    <small className="nextjs-container-build-error-version-status">
+    <span className="nextjs-container-build-error-version-status">
       <span className={indicatorClass} />
       <small data-nextjs-version-checker title={title}>
         {text}
@@ -26,7 +29,7 @@ export function VersionStalenessInfo(props: VersionInfo) {
         </a>
       )}
       {process.env.TURBOPACK ? ' (turbo)' : ''}
-    </small>
+    </span>
   )
 }
 

diff --git a/...rc/client/components/react-dev-overlay/internal/components/VersionStalenessInfo/styles.ts b/...rc/client/components/react-dev-overlay/internal/components/VersionStalenessInfo/styles.ts
@@ -6,7 +6,6 @@ const styles = css`
     text-align: right;
   }
   .nextjs-container-build-error-version-status small {
-    margin-left: var(--size-gap);
     font-size: var(--size-font-small);
   }
   .nextjs-container-build-error-version-status a {

diff --git a/packages/next/src/client/components/react-dev-overlay/internal/container/BuildError.tsx b/packages/next/src/client/components/react-dev-overlay/internal/container/BuildError.tsx
@@ -29,13 +29,13 @@ export const BuildError: React.FC<BuildErrorProps> = function BuildError({
         <DialogContent>
           <DialogHeader className="nextjs-container-errors-header">
             <h1 id="nextjs__container_errors_label">{'Build Error'}</h1>
+            <VersionStalenessInfo versionInfo={versionInfo} />
             <p
               id="nextjs__container_errors_desc"
               className="nextjs__container_errors_desc"
             >
               Failed to compile
             </p>
-            {versionInfo ? <VersionStalenessInfo {...versionInfo} /> : null}
           </DialogHeader>
           <DialogBody className="nextjs-container-errors-body">
             <Terminal content={message} />

diff --git a/packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx b/packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx
@@ -265,7 +265,7 @@ export function Errors({
                 {' error'}
                 {readyErrors.length < 2 ? '' : 's'}
               </small>
-              {versionInfo ? <VersionStalenessInfo {...versionInfo} /> : null}
+              <VersionStalenessInfo versionInfo={versionInfo} />
             </LeftRightDialogHeader>
             <h1 id="nextjs__container_errors_label">
               {isServerError ? 'Server Error' : 'Unhandled Runtime Error'}
@@ -323,6 +323,9 @@ export function Errors({
 }
 
 export const styles = css`
+  .nextjs-container-errors-header {
+    position: relative;
+  }
   .nextjs-container-errors-header > h1 {
     font-size: var(--size-font-big);
     line-height: var(--size-font-bigger);
@@ -406,4 +409,10 @@ export const styles = css`
   .nextjs-toast-errors-hide-button:hover {
     opacity: 1;
   }
+  .nextjs-container-errors-header
+    > .nextjs-container-build-error-version-status {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
 `
diff --git a/...client/components/react-dev-overlay/internal/container/root-layout-missing-tags-error.tsx b/...client/components/react-dev-overlay/internal/container/root-layout-missing-tags-error.tsx
@@ -23,10 +23,10 @@ export const RootLayoutMissingTagsError: React.FC<RootLayoutMissingTagsErrorProp
         >
           <DialogContent>
             <DialogHeader className="nextjs-container-errors-header">
+              <VersionStalenessInfo versionInfo={versionInfo} />
               <h3 id="nextjs__container_errors_label">
                 Missing required html tags
               </h3>
-              {versionInfo ? <VersionStalenessInfo {...versionInfo} /> : null}
               <p
                 id="nextjs__container_errors_desc"
                 className="nextjs__container_errors_desc"