fix overflow issue with stack trace

src/components/UI/ErrorPage.tsx

@@ -10,17 +10,16 @@ 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>
           <Heading as="h2" className="text-text-primary">
             This is a little embarrassing...
           </Heading>
           <P>
-              We are really sorry but an error occured in the web client that
+            We are really sorry but an error occurred in the web client that
-              caused it to crash. This is not supposed to happen and we are
+            caused it to crash. <br />
-              working hard to fix it.
+            This is not supposed to happen, and we are working hard to fix it.
           </P>
           <P>
             The best way to prevent this from happening again to you or anyone
@@ -28,10 +27,10 @@ export function ErrorPage({ error }: { error: Error }) {
           </P>
           <P>Please include the following information in your report:</P>
           <ul className="list-disc list-inside text-sm">
-              <li>What you were doing when the error occured</li>
+            <li>What you were doing when the error occurred</li>
             <li>What you expected to happen</li>
             <li>What actually happened</li>
-              <li>Any other information you think might be relevant</li>
+            <li>Any other relevant information</li>
           </ul>
           <P>
             You can report the issue to our{" "}
@@ -39,8 +38,7 @@ export function ErrorPage({ error }: { error: Error }) {
               href={newGithubIssueUrl({
                 repoUrl: "https://github.com/meshtastic/web",
                 template: "bug.yml",
-                  title:
+                title: "[Bug]: An unhandled error occurred. <Add details here>",
-                    "[Bug]: An unhandled error occurred. <Add details here>",
                 logs: error?.stack,
               })}
             >
@@ -51,43 +49,46 @@ export function ErrorPage({ error }: { error: Error }) {
           <P>
             Return to the <Link href="/">dashboard</Link>
           </P>
+        </div>
 
-            <details className="mt-6 text-md">
+        <div className="hidden md:block md:max-w-64 lg:max-w-80 w-full aspect-suqare">
+          <img
+            src="/images/chirpy.svg"
+            alt="Chirpy the Meshtastic error"
+            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="block text-sm mt-4 overflow-auto">
+        <span className="text-sm mt-4">
-                {error?.message ? (
+          {error?.message && (
             <>
               <label htmlFor="message">Error message:</label>
-                    <pre
+              <p
                 id="message"
-                      className="w-full text-slate-400"
+                className="text-slate-400 break-words overflow-wrap"
-                    >{`${error.message}`}</pre>
+              >
+                {error.message}
+              </p>
             </>
-                ) : null}
+          )}
-                {error?.stack ? (
+          {error?.stack && (
             <>
               <label htmlFor="stack">Stack trace:</label>
-                    <pre
+              <p
                 id="stack"
-                      className="w-full text-slate-400"
+                className="text-slate-400 break-words overflow-wrap"
-                    >{`${error.stack}`}</pre>
+              >
+                {error.stack}
+              </p>
             </>
-                ) : null}
+          )}
-                {!error?.message && !error?.stack ? (
+          {!error?.message && !error?.stack && (
-                  <pre className=" w-full text-slate-400">
+            <p className="text-slate-400">{error.toString()}</p>
-                    {error.toString()}
+          )}
-                  </pre>
-                ) : null}
         </span>
       </details>
-          </div>
-          <img
-            src="/images/chirpy.svg"
-            alt="Chripy the Meshtastic error"
-            className="max-w-2/5 aspect-auto place-self-center md:justify-self-start"
-          />
-        </div>
-      </section>
     </article>
   );
 }