From 2d0f988ed1b566ddf3992d5f1c0ea0e582369528 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Thu, 10 Mar 2022 20:26:33 +0000
Subject: [PATCH] fix: improve design of error pages (#68)

---
 .../templates/error-500/index.html            | 25 ++++---
 .../templates/error-dev/index.html            | 75 +++++++++++--------
 2 files changed, 55 insertions(+), 45 deletions(-)
diff --git a/packages/ui-templates/templates/error-500/index.html b/packages/ui-templates/templates/error-500/index.html
index cb49c8ce32..2454ae1682 100644
--- a/packages/ui-templates/templates/error-500/index.html
+++ b/packages/ui-templates/templates/error-500/index.html
@@ -17,22 +17,23 @@
       dark:text-sky-surface
     ">
   <div class="min-h-screen md:flex">
-    <div class="flex items-center justify-center w-full md:w-1/2">
-      <div class="max-w-sm m-8">
-        <div class="text-5xl font-bold dark:text-white md:text-15xl">
+    <div class="flex items-center justify-center w-full max-w-full">
+      <div class="max-w-full lg:max-w-10xl m-8 p-4">
+        <div class="md:max-w-sm text-5xl font-bold dark:text-white md:text-15xl">
           {{ messages.statusCode }}
         </div>
         <div class="w-16 h-1 my-3 bg-primary md:my-6"></div>
-        <p class="
-              mb-8
-              text-2xl
-              font-light
-              leading-normal
-              dark:text-cloud-lighter
-              md:text-3xl
-            ">
+        <div class="
+          mb-8
+          text-2xl
+          font-light
+          leading-normal
+          dark:text-cloud-lighter
+          md:text-3xl
+          max-w-sm
+        ">
           {{ messages.description }}
-        </p>
+        </div>
       </div>
     </div>
     <div class="
diff --git a/packages/ui-templates/templates/error-dev/index.html b/packages/ui-templates/templates/error-dev/index.html
index 3ee5b34947..5d2f010f9f 100644
--- a/packages/ui-templates/templates/error-dev/index.html
+++ b/packages/ui-templates/templates/error-dev/index.html
@@ -1,45 +1,54 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>{{ messages.statusCode }} - {{ messages.statusMessage }} | {{ messages.appName }}</title>
-    <meta charset="utf-8" />
-    <meta
-      content="width=device-width,initial-scale=1.0,minimum-scale=1.0"
-      name="viewport"
-    />
-    <script type="module" src="/styles.ts"></script>
-  </head>
-  <body
-    class="
+
+<head>
+  <title>{{ messages.statusCode }} - {{ messages.statusMessage }} | {{ messages.appName }}</title>
+  <meta charset="utf-8" />
+  <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0" name="viewport" />
+  <script type="module" src="/styles.ts"></script>
+</head>
+
+<body class="
       font-sans
       antialiased
       bg-cloud-surface
       dark:bg-sky-darker
       text-sky-darkest
       dark:text-sky-surface
-    "
-  >
-    <div class="min-h-screen md:flex">
-      <div class="flex items-center justify-center w-full md:w-1/2">
-        <div class="max-w-sm m-8">
-          <div class="text-5xl font-bold dark:text-white md:text-15xl">
-            {{ messages.statusCode }}
-          </div>
-          <div class="w-16 h-1 my-3 bg-primary md:my-6"></div>
-          <p
-            class="
-              mb-8
-              text-2xl
-              font-light
-              leading-normal
-              dark:text-cloud-lighter
-              md:text-3xl
-            "
-          >
-            {{ messages.description }}
-          </p>
+    ">
+  <div class="min-h-screen md:flex">
+    <div class="flex items-center justify-center w-full max-w-full">
+      <div class="max-w-full lg:max-w-10xl m-8 p-4">
+        <div class="md:max-w-sm text-5xl font-bold dark:text-white md:text-15xl">
+          {{ messages.statusCode }}
+        </div>
+        <div class="w-16 h-1 my-3 bg-primary md:my-6"></div>
+        <div class="
+          mb-8
+          text-2xl
+          font-light
+          leading-normal
+          dark:text-cloud-lighter
+          md:text-3xl
+          max-w-sm
+        ">
+          {{ messages.description }}
+        </div>
+        <div class="
+          mb-8
+          text-sm
+          leading-normal
+          dark:text-cloud-lighter
+          md:text-lg
+          white
+          overflow-scroll
+          max-w-full
+        ">
+          {{ messages.stack }}
         </div>
       </div>
     </div>
-  </body>
+  </div>
+</body>
+
 </html>
