feat: add chirpy to error page

src/App.tsx

@@ -38,7 +38,7 @@ export const App = (): JSX.Element => {
             <DeviceSelector />
             <div className="flex grow flex-col">
               {device ? (
-                <div className="flex h-screen">
+                <div className="flex h-screen w-full">
                   <DialogManager />
                   <KeyBackupReminder />
                   <CommandPalette />

src/components/UI/ErrorPage.tsx

@@ -10,15 +10,17 @@ export function ErrorPage({ error }: { error: Error }) {
   }
 
   return (
-    <article>
-      <section className="prose mx-auto mb-20 mt-28 max-w-prose px-8 text-2xl transition-all duration-150 ease-linear space-y-2">
+    <article className="w-full">
+      <section className="mx-auto mt-20 p-6 md:p-10 text-xl transition-all duration-150 ease-linear space-y-2">
+        <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 caused
-          it to crash. This is not supposed to happen and we are working hard to
-          fix it.
+              We are really sorry but an error occured in the web client that
+              caused it to crash. 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
@@ -37,7 +39,8 @@ export function ErrorPage({ error }: { error: Error }) {
                 href={newGithubIssueUrl({
                   repoUrl: "https://github.com/meshtastic/web",
                   template: "bug.yml",
-              title: "[Bug]: An unhandled error occurred. <Add details here>",
+                  title:
+                    "[Bug]: An unhandled error occurred. <Add details here>",
                   logs: error?.stack,
                 })}
               >
@@ -71,10 +74,19 @@ export function ErrorPage({ error }: { error: Error }) {
                   </>
                 ) : null}
                 {!error?.message && !error?.stack ? (
-              <pre className=" w-full text-slate-400">{error.toString()}</pre>
+                  <pre className=" w-full text-slate-400">
+                    {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>
   );

src/components/UI/Typography/P.tsx

@@ -1,7 +1,10 @@
+import { cn } from "@app/core/utils/cn";
+
 export interface PProps {
   children: React.ReactNode;
+  className?: string;
 }
 
-export const P = ({ children }: PProps) => (
-  <p className="leading-7 not-first:mt-6">{children}</p>
+export const P = ({ children, className }: PProps) => (
+  <p className={cn("leading-7 not-first:mt-6", className)}>{children}</p>
 );