From a9b0dc84bec8a593c78679474744766f41c9952e Mon Sep 17 00:00:00 2001
From: Tanner <tannercdolby@gmail.com>
Date: Sun, 5 Mar 2023 01:46:26 -0800
Subject: [PATCH 1/4] refactor: update styling for ErrorDisplay

---
 .../docusaurus/src/client/theme-fallback/Error/index.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/docusaurus/src/client/theme-fallback/Error/index.tsx b/packages/docusaurus/src/client/theme-fallback/Error/index.tsx
index 513348cce4d7..cf7b4946f82d 100644
--- a/packages/docusaurus/src/client/theme-fallback/Error/index.tsx
+++ b/packages/docusaurus/src/client/theme-fallback/Error/index.tsx
@@ -21,12 +21,15 @@ function ErrorDisplay({error, tryAgain}: Props): JSX.Element {
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'center',
-        alignItems: 'center',
-        height: '50vh',
+        alignItems: 'flex-start',
+        minHeight: '100vh',
         width: '100%',
+        maxWidth: '60ch',
         fontSize: '20px',
+        margin: '0 auto',
+        padding: '1rem',
       }}>
-      <h1>This page crashed.</h1>
+      <h1 style={{fontSize: '3rem'}}>This page crashed</h1>
       <p>{error.message}</p>
       <button type="button" onClick={tryAgain}>
         Try again

From 04e3507d036fd4bdebeafddbded6273f5a3da37e Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Thu, 9 Mar 2023 12:15:54 +0100
Subject: [PATCH 2/4] polish styling of generic docusaurus error page

---
 .../src/client/theme-fallback/Error/index.tsx     | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/docusaurus/src/client/theme-fallback/Error/index.tsx b/packages/docusaurus/src/client/theme-fallback/Error/index.tsx
index cf7b4946f82d..645bd1682bdf 100644
--- a/packages/docusaurus/src/client/theme-fallback/Error/index.tsx
+++ b/packages/docusaurus/src/client/theme-fallback/Error/index.tsx
@@ -24,16 +24,25 @@ function ErrorDisplay({error, tryAgain}: Props): JSX.Element {
         alignItems: 'flex-start',
         minHeight: '100vh',
         width: '100%',
-        maxWidth: '60ch',
+        maxWidth: '80ch',
         fontSize: '20px',
         margin: '0 auto',
         padding: '1rem',
       }}>
       <h1 style={{fontSize: '3rem'}}>This page crashed</h1>
-      <p>{error.message}</p>
-      <button type="button" onClick={tryAgain}>
+      <button
+        type="button"
+        onClick={tryAgain}
+        style={{
+          margin: '1rem 0',
+          fontSize: '2rem',
+          cursor: 'pointer',
+          borderRadius: 20,
+          padding: '1rem',
+        }}>
         Try again
       </button>
+      <p style={{whiteSpace: 'pre-wrap'}}>{error.message}</p>
     </div>
   );
 }

From 6f178ad79e8a958fe6d0b7ebb95ac9522daa65a8 Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Thu, 9 Mar 2023 12:43:00 +0100
Subject: [PATCH 3/4] Improve styling of themed error page

---
 .../src/theme/ErrorPageContent.tsx              | 17 +++++++++++++----
 packages/docusaurus-theme-common/src/index.ts   |  5 ++++-
 .../src/utils/errorBoundaryUtils.module.css     | 11 +++++++++++
 .../src/utils/errorBoundaryUtils.tsx            |  5 +++++
 .../ErrorBoundaryTestButton/index.tsx           |  2 +-
 5 files changed, 34 insertions(+), 6 deletions(-)
 create mode 100644 packages/docusaurus-theme-common/src/utils/errorBoundaryUtils.module.css

diff --git a/packages/docusaurus-theme-classic/src/theme/ErrorPageContent.tsx b/packages/docusaurus-theme-classic/src/theme/ErrorPageContent.tsx
index 6ee3b9f8b301..b4134fa744bd 100644
--- a/packages/docusaurus-theme-classic/src/theme/ErrorPageContent.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/ErrorPageContent.tsx
@@ -7,7 +7,10 @@
 
 import React from 'react';
 import Translate from '@docusaurus/Translate';
-import {ErrorBoundaryTryAgainButton} from '@docusaurus/theme-common';
+import {
+  ErrorBoundaryError,
+  ErrorBoundaryTryAgainButton,
+} from '@docusaurus/theme-common';
 import type {Props} from '@theme/Error';
 import Heading from '@theme/Heading';
 
@@ -26,9 +29,15 @@ export default function ErrorPageContent({
               This page crashed.
             </Translate>
           </Heading>
-          <p>{error.message}</p>
-          <div>
-            <ErrorBoundaryTryAgainButton onClick={tryAgain} />
+          <div className="margin-vert--lg">
+            <ErrorBoundaryTryAgainButton
+              onClick={tryAgain}
+              className="button button--primary shadow--lw"
+            />
+          </div>
+          <hr />
+          <div className="margin-vert--md">
+            <ErrorBoundaryError error={error} />
           </div>
         </div>
       </div>
diff --git a/packages/docusaurus-theme-common/src/index.ts b/packages/docusaurus-theme-common/src/index.ts
index 3e5f324e7c91..6fa4b65191a0 100644
--- a/packages/docusaurus-theme-common/src/index.ts
+++ b/packages/docusaurus-theme-common/src/index.ts
@@ -96,4 +96,7 @@ export {
   UnlistedMetadata,
 } from './utils/unlistedUtils';
 
-export {ErrorBoundaryTryAgainButton} from './utils/errorBoundaryUtils';
+export {
+  ErrorBoundaryTryAgainButton,
+  ErrorBoundaryError,
+} from './utils/errorBoundaryUtils';
diff --git a/packages/docusaurus-theme-common/src/utils/errorBoundaryUtils.module.css b/packages/docusaurus-theme-common/src/utils/errorBoundaryUtils.module.css
new file mode 100644
index 000000000000..6b6ecfa607d1
--- /dev/null
+++ b/packages/docusaurus-theme-common/src/utils/errorBoundaryUtils.module.css
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.errorBoundaryError {
+  white-space: pre-wrap;
+  color: red;
+}
diff --git a/packages/docusaurus-theme-common/src/utils/errorBoundaryUtils.tsx b/packages/docusaurus-theme-common/src/utils/errorBoundaryUtils.tsx
index df1a5277d984..193ec7cd4ff7 100644
--- a/packages/docusaurus-theme-common/src/utils/errorBoundaryUtils.tsx
+++ b/packages/docusaurus-theme-common/src/utils/errorBoundaryUtils.tsx
@@ -7,6 +7,7 @@
 
 import React, {type ComponentProps} from 'react';
 import Translate from '@docusaurus/Translate';
+import styles from './errorBoundaryUtils.module.css';
 
 export function ErrorBoundaryTryAgainButton(
   props: ComponentProps<'button'>,
@@ -21,3 +22,7 @@ export function ErrorBoundaryTryAgainButton(
     </button>
   );
 }
+
+export function ErrorBoundaryError({error}: {error: Error}): JSX.Element {
+  return <p className={styles.errorBoundaryError}>{error.message}</p>;
+}
diff --git a/website/src/components/ErrorBoundaryTestButton/index.tsx b/website/src/components/ErrorBoundaryTestButton/index.tsx
index 20ab47ccfe52..e0998291777f 100644
--- a/website/src/components/ErrorBoundaryTestButton/index.tsx
+++ b/website/src/components/ErrorBoundaryTestButton/index.tsx
@@ -14,7 +14,7 @@ export default function ErrorBoundaryTestButton({
 }): JSX.Element {
   const [state, setState] = useState(false);
   if (state) {
-    throw new Error('Boom!');
+    throw new Error('Boom!\nSomething bad happened, but you can try again!');
   }
   return (
     <button type="button" onClick={() => setState(true)}>

From 4e8fc8e964a4dbecc5c85b5b7b5cd887287288e2 Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Thu, 9 Mar 2023 15:41:15 +0100
Subject: [PATCH 4/4] fix weird css order classname change

---
 website/testCSSOrder.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/testCSSOrder.mjs b/website/testCSSOrder.mjs
index 62422e3d4ea8..aaa9b5b4bb88 100644
--- a/website/testCSSOrder.mjs
+++ b/website/testCSSOrder.mjs
@@ -31,7 +31,6 @@ const EXPECTED_CSS_MARKERS = [
   // See https://github.com/facebook/docusaurus/pull/6222
   '.markdown>h2',
   '.button--outline.button--active',
-  '.DocSearch-Hit-content-wrapper',
   '--ifm-color-scheme:light',
   '.col[class*=col--]',
   '.padding-vert--xl',
@@ -49,6 +48,7 @@ const EXPECTED_CSS_MARKERS = [
 
   // Lazy-loaded lib
   '.DocSearch-Modal',
+  '.DocSearch-Hit-content-wrapper',
 ];
 
 const cssDirName = fileURLToPath(new URL('build/assets/css', import.meta.url));