Merge pull request #514 from movie-web/fix-modal-overflow

Fix error overflow

src/pages/parts/errors/ErrorCard.tsx

@@ -37,24 +37,28 @@ 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 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">
           <Button
             theme="secondary"
-            padding="p-2 md:px-4"
+            padding="p-2 h-10 min-w-[40px] md:px-4"
             onClick={() => copyError()}
           >
             {hasCopied ? (
               <>
-                <Icon icon={Icons.CHECKMARK} className="text-xs mr-3" />
-                {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="text-2xl mr-3" />
-                {t("actions.copy")}
+                <Icon icon={Icons.COPY} className="text-2xl" />
+                <span className="hidden min-[400px]:inline-block ml-3">
+                  {t("actions.copy")}
+                </span>
               </>
             )}
           </Button>
@@ -67,7 +71,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 +86,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 +103,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>

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")}