From 41aaf29be77f5d7f70a3a690541794b1501f4e49 Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Sat, 9 Dec 2023 12:58:26 +0100
Subject: [PATCH 1/4] Fix error overflow

---
 src/pages/parts/errors/ErrorCard.tsx | 20 ++++++++++----------
 src/pages/parts/errors/ErrorPart.tsx |  8 ++++----
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/pages/parts/errors/ErrorCard.tsx b/src/pages/parts/errors/ErrorCard.tsx
index 3930326b..a03abe38 100644
--- a/src/pages/parts/errors/ErrorCard.tsx
+++ b/src/pages/parts/errors/ErrorCard.tsx
@@ -37,10 +37,10 @@ export function ErrorCard(props: {
 
   return (
     // I didn't put a <Transition> here because it'd fade out, then jump height weirdly
-    <div className="w-full bg-errors-card p-6 rounded-lg">
-      <div className="flex justify-between items-center pb-2 border-b border-errors-border">
-        <span className="text-white font-medium">{t("errors.details")}</span>
-        <div className="flex justify-center items-center gap-3">
+    <div className="bg-errors-card w-full rounded-lg p-6">
+      <div className="border-errors-border flex items-center justify-between border-b pb-2">
+        <span className="font-medium text-white">{t("errors.details")}</span>
+        <div className="flex items-center justify-center gap-3">
           <Button
             theme="secondary"
             padding="p-2 md:px-4"
@@ -48,12 +48,12 @@ export function ErrorCard(props: {
           >
             {hasCopied ? (
               <>
-                <Icon icon={Icons.CHECKMARK} className="text-xs mr-3" />
+                <Icon icon={Icons.CHECKMARK} className="mr-3 text-xs" />
                 {t("actions.copied")}
               </>
             ) : (
               <>
-                <Icon icon={Icons.COPY} className="text-2xl mr-3" />
+                <Icon icon={Icons.COPY} className="mr-3 text-2xl" />
                 {t("actions.copy")}
               </>
             )}
@@ -67,7 +67,7 @@ export function ErrorCard(props: {
           </Button>
         </div>
       </div>
-      <div className="mt-4 h-60 overflow-y-auto text-left whitespace-pre pointer-events-auto select-text">
+      <div className="pointer-events-auto mt-4 h-60 select-text overflow-y-auto whitespace-pre text-left">
         {errorMessage}
       </div>
     </div>
@@ -82,8 +82,8 @@ export function ErrorCardInPlainModal(props: {
 }) {
   if (!props.show || !props.error) return null;
   return (
-    <div className="fixed inset-0 w-full h-full bg-black bg-opacity-30 flex justify-center items-center p-12">
-      <div className="max-w-2xl">
+    <div className="fixed inset-0 flex h-full w-full items-center justify-center bg-black bg-opacity-30 p-12">
+      <div className="w-full max-w-2xl">
         <ErrorCard error={props.error} onClose={props.onClose} />
       </div>
     </div>
@@ -99,7 +99,7 @@ export function ErrorCardInModal(props: {
 
   return (
     <Modal id={props.id}>
-      <div className="max-w-2xl pointer-events-auto">
+      <div className="pointer-events-auto w-11/12 max-w-2xl">
         <ErrorCard error={props.error} onClose={props.onClose} />
       </div>
     </Modal>
diff --git a/src/pages/parts/errors/ErrorPart.tsx b/src/pages/parts/errors/ErrorPart.tsx
index 9d62b3dc..2d39af3a 100644
--- a/src/pages/parts/errors/ErrorPart.tsx
+++ b/src/pages/parts/errors/ErrorPart.tsx
@@ -21,10 +21,10 @@ export function ErrorPart(props: { error: any; errorInfo: any }) {
   const error = `${props.error.toString()}\n${errorLines.join("\n")}`;
 
   return (
-    <div className="relative flex flex-1 flex-col min-h-screen">
+    <div className="relative flex min-h-screen flex-1 flex-col">
       <div className="flex h-full flex-1 flex-col items-center justify-center p-5 text-center">
         <ErrorLayout>
-          <ErrorContainer maxWidth="max-w-2xl">
+          <ErrorContainer maxWidth="max-w-2xl w-9/10">
             <IconPill icon={Icons.EYE_SLASH}>{t("errors.badge")}</IconPill>
             <Title>{t("errors.title")}</Title>
 
@@ -38,14 +38,14 @@ export function ErrorPart(props: { error: any; errorInfo: any }) {
             <div className="flex gap-3">
               <ButtonPlain
                 theme="secondary"
-                className="mt-6 md:px-12 p-2.5"
+                className="mt-6 p-2.5 md:px-12"
                 onClick={() => window.location.reload()}
               >
                 {t("errors.reloadPage")}
               </ButtonPlain>
               <ButtonPlain
                 theme="purple"
-                className="mt-6 md:px-12 p-2.5"
+                className="mt-6 p-2.5 md:px-12"
                 onClick={() => setShowErrorCard(true)}
               >
                 {t("errors.showError")}

From 0000354a138eaabf8550494efdd0d2438ead221a Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Sat, 9 Dec 2023 13:12:26 +0100
Subject: [PATCH 2/4] Hide copy texts on mega-small viewports
 https://youtu.be/q6EoRBvdVPQ

---
 src/pages/parts/errors/ErrorCard.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/parts/errors/ErrorCard.tsx b/src/pages/parts/errors/ErrorCard.tsx
index a03abe38..93aa7981 100644
--- a/src/pages/parts/errors/ErrorCard.tsx
+++ b/src/pages/parts/errors/ErrorCard.tsx
@@ -53,8 +53,10 @@ export function ErrorCard(props: {
               </>
             ) : (
               <>
-                <Icon icon={Icons.COPY} className="mr-3 text-2xl" />
-                {t("actions.copy")}
+                <Icon icon={Icons.COPY} className="min-[400px]:mr-3 text-2xl" />
+                <span className="hidden min-[400px]:inline-block">
+                  {t("actions.copy")}
+                </span>
               </>
             )}
           </Button>

From f17ccd506649034fc82804080dda7efd759a0439 Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Sat, 9 Dec 2023 13:16:08 +0100
Subject: [PATCH 3/4] Fix text alignment, also apply text style to copied

---
 src/pages/parts/errors/ErrorCard.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/pages/parts/errors/ErrorCard.tsx b/src/pages/parts/errors/ErrorCard.tsx
index 93aa7981..4ee4c2ab 100644
--- a/src/pages/parts/errors/ErrorCard.tsx
+++ b/src/pages/parts/errors/ErrorCard.tsx
@@ -37,7 +37,7 @@ export function ErrorCard(props: {
 
   return (
     // I didn't put a <Transition> here because it'd fade out, then jump height weirdly
-    <div className="bg-errors-card w-full rounded-lg p-6">
+    <div className="bg-errors-card w-full rounded-lg p-6 text-left">
       <div className="border-errors-border flex items-center justify-between border-b pb-2">
         <span className="font-medium text-white">{t("errors.details")}</span>
         <div className="flex items-center justify-center gap-3">
@@ -48,13 +48,15 @@ export function ErrorCard(props: {
           >
             {hasCopied ? (
               <>
-                <Icon icon={Icons.CHECKMARK} className="mr-3 text-xs" />
-                {t("actions.copied")}
+                <Icon icon={Icons.CHECKMARK} className="text-xs" />
+                <span className="hidden min-[400px]:inline-block ml-3">
+                  {t("actions.copied")}
+                </span>
               </>
             ) : (
               <>
-                <Icon icon={Icons.COPY} className="min-[400px]:mr-3 text-2xl" />
-                <span className="hidden min-[400px]:inline-block">
+                <Icon icon={Icons.COPY} className="text-2xl" />
+                <span className="hidden min-[400px]:inline-block ml-3">
                   {t("actions.copy")}
                 </span>
               </>

From 3b329bcf14730dcab5dfaa3374d27dfa6f589cc5 Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Sat, 9 Dec 2023 13:40:53 +0100
Subject: [PATCH 4/4] Fix stupid checkmark thing >:(

---
 src/pages/parts/errors/ErrorCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/parts/errors/ErrorCard.tsx b/src/pages/parts/errors/ErrorCard.tsx
index 4ee4c2ab..9c975596 100644
--- a/src/pages/parts/errors/ErrorCard.tsx
+++ b/src/pages/parts/errors/ErrorCard.tsx
@@ -43,7 +43,7 @@ export function ErrorCard(props: {
         <div className="flex items-center justify-center gap-3">
           <Button
             theme="secondary"
-            padding="p-2 md:px-4"
+            padding="p-2 h-10 min-w-[40px] md:px-4"
             onClick={() => copyError()}
           >
             {hasCopied ? (