Polish error page styling (vercel#50916)

Polish default client error page styling: * shrink the `line-height` to `2em` for better mobile display * remove `text-align: left` to let the text center properly #### After vs Before (both **app router** and **pages** default client error page) <p> <img width="300" alt="image" src="https://github.com/vercel/next.js/assets/4800338/de7260af-7046-4783-8f82-8ac5f39f25b7"> <img width="300" alt="image" src="https://github.com/vercel/next.js/assets/4800338/f4207809-f11f-448d-95ec-0a32b54f3562"> </p> #### After (both **app router** and **pages** default client error page) Closes NEXT-1263
hydRAnger · Jun 12, 2023 · 99636c4 · 99636c4
1 parent 5043340
commit 99636c4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 16 deletions.
diff --git a/packages/next/src/client/components/error-boundary.tsx b/packages/next/src/client/components/error-boundary.tsx
@@ -15,14 +15,11 @@ const styles = {
     alignItems: 'center',
     justifyContent: 'center',
   },
-  desc: {
-    textAlign: 'left',
-  },
   text: {
     fontSize: '14px',
     fontWeight: 400,
-    lineHeight: '3em',
-    margin: 0,
+    lineHeight: '28px',
+    margin: '0 8px',
   },
 } as const
 
@@ -108,7 +105,7 @@ export default function GlobalError({ error }: { error: any }) {
       <head></head>
       <body>
         <div style={styles.error}>
-          <div style={styles.desc}>
+          <div>
             <h2 style={styles.text}>
               Application error: a client-side exception has occurred (see the
               browser console for more information).

diff --git a/packages/next/src/pages/_error.tsx b/packages/next/src/pages/_error.tsx
@@ -36,27 +36,24 @@ const styles: Record<string, React.CSSProperties> = {
     alignItems: 'center',
     justifyContent: 'center',
   },
-
   desc: {
-    display: 'inline-block',
-    textAlign: 'left',
+    lineHeight: '48px',
   },
-
   h1: {
     display: 'inline-block',
     margin: '0 20px 0 0',
     paddingRight: 23,
     fontSize: 24,
     fontWeight: 500,
     verticalAlign: 'top',
-    lineHeight: '49px',
   },
-
   h2: {
     fontSize: 14,
     fontWeight: 400,
-    lineHeight: '49px',
-    margin: 0,
+    lineHeight: '28px',
+  },
+  wrap: {
+    display: 'inline-block',
   },
 }
 
@@ -85,7 +82,7 @@ export default class Error<P = {}> extends React.Component<P & ErrorProps> {
               : 'Application error: a client-side exception has occurred'}
           </title>
         </Head>
-        <div>
+        <div style={styles.desc}>
           <style
             dangerouslySetInnerHTML={{
               /* CSS minified from
@@ -118,7 +115,7 @@ export default class Error<P = {}> extends React.Component<P & ErrorProps> {
               {statusCode}
             </h1>
           ) : null}
-          <div style={styles.desc}>
+          <div style={styles.wrap}>
             <h2 style={styles.h2}>
               {this.props.title || statusCode ? (
                 title