fix overflow issue with stack trace

src/components/UI/ErrorPage.tsx

@@ -10,84 +10,85 @@ export function ErrorPage({ error }: { error: Error }) {
   }
 
   return (
-    <article className="w-full">
+    <article className="w-full overflow-y-auto">
-      <section className="mx-auto mt-20 p-6 md:p-10 text-xl transition-all duration-150 ease-linear space-y-2">
+      <section className="flex shrink md:flex-row gap-16 mt-20 px-4 md:px-8 text-lg md:text-xl space-y-2 place-items-center">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div>
-          <div>
+          <Heading as="h2" className="text-text-primary">
-            <Heading as="h2" className="text-text-primary">
+            This is a little embarrassing...
-              This is a little embarrassing...
+          </Heading>
-            </Heading>
+          <P>
-            <P>
+            We are really sorry but an error occurred in the web client that
-              We are really sorry but an error occured in the web client that
+            caused it to crash. <br />
-              caused it to crash. This is not supposed to happen and we are
+            This is not supposed to happen, and we are working hard to fix it.
-              working hard to fix it.
+          </P>
-            </P>
+          <P>
-            <P>
+            The best way to prevent this from happening again to you or anyone
-              The best way to prevent this from happening again to you or anyone
+            else is to report the issue to us.
-              else is to report the issue to us.
+          </P>
-            </P>
+          <P>Please include the following information in your report:</P>
-            <P>Please include the following information in your report:</P>
+          <ul className="list-disc list-inside text-sm">
-            <ul className="list-disc list-inside text-sm">
+            <li>What you were doing when the error occurred</li>
-              <li>What you were doing when the error occured</li>
+            <li>What you expected to happen</li>
-              <li>What you expected to happen</li>
+            <li>What actually happened</li>
-              <li>What actually happened</li>
+            <li>Any other relevant information</li>
-              <li>Any other information you think might be relevant</li>
+          </ul>
-            </ul>
+          <P>
-            <P>
+            You can report the issue to our{" "}
-              You can report the issue to our{" "}
+            <Link
-              <Link
+              href={newGithubIssueUrl({
-                href={newGithubIssueUrl({
+                repoUrl: "https://github.com/meshtastic/web",
-                  repoUrl: "https://github.com/meshtastic/web",
+                template: "bug.yml",
-                  template: "bug.yml",
+                title: "[Bug]: An unhandled error occurred. <Add details here>",
-                  title:
+                logs: error?.stack,
-                    "[Bug]: An unhandled error occurred. <Add details here>",
+              })}
-                  logs: error?.stack,
+            >
-                })}
+              Github
-              >
+            </Link>
-                Github
+            <ExternalLink size={24} className="inline-block ml-2" />
-              </Link>
+          </P>
-              <ExternalLink size={24} className="inline-block ml-2" />
+          <P>
-            </P>
+            Return to the <Link href="/">dashboard</Link>
-            <P>
+          </P>
-              Return to the <Link href="/">dashboard</Link>
+        </div>
-            </P>
 
-            <details className="mt-6 text-md">
+        <div className="hidden md:block md:max-w-64 lg:max-w-80 w-full aspect-suqare">
-              <summary className="cursor-pointer">Error Details</summary>
-              <span className="block text-sm mt-4 overflow-auto">
-                {error?.message ? (
-                  <>
-                    <label htmlFor="message">Error message:</label>
-                    <pre
-                      id="message"
-                      className="w-full text-slate-400"
-                    >{`${error.message}`}</pre>
-                  </>
-                ) : null}
-                {error?.stack ? (
-                  <>
-                    <label htmlFor="stack">Stack trace:</label>
-                    <pre
-                      id="stack"
-                      className="w-full text-slate-400"
-                    >{`${error.stack}`}</pre>
-                  </>
-                ) : null}
-                {!error?.message && !error?.stack ? (
-                  <pre className=" w-full text-slate-400">
-                    {error.toString()}
-                  </pre>
-                ) : null}
-              </span>
-            </details>
-          </div>
           <img
             src="/images/chirpy.svg"
-            alt="Chripy the Meshtastic error"
+            alt="Chirpy the Meshtastic error"
-            className="max-w-2/5 aspect-auto place-self-center md:justify-self-start"
+            className="max-w-full h-auto"
           />
         </div>
       </section>
+      <details className="mt-8 px-4 md:px-8 text-lg md:text-xl space-y-2 text-md whitespace-pre-wrap break-all">
+        <summary className="cursor-pointer">Error Details</summary>
+        <span className="text-sm mt-4">
+          {error?.message && (
+            <>
+              <label htmlFor="message">Error message:</label>
+              <p
+                id="message"
+                className="text-slate-400 break-words overflow-wrap"
+              >
+                {error.message}
+              </p>
+            </>
+          )}
+          {error?.stack && (
+            <>
+              <label htmlFor="stack">Stack trace:</label>
+              <p
+                id="stack"
+                className="text-slate-400 break-words overflow-wrap"
+              >
+                {error.stack}
+              </p>
+            </>
+          )}
+          {!error?.message && !error?.stack && (
+            <p className="text-slate-400">{error.toString()}</p>
+          )}
+        </span>
+      </details>
     </article>
   );
 }