From b40c65871ad9fcef4231c2afb32193765ae7bd07 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 5 May 2023 19:46:40 +0530
Subject: [PATCH] chore: fix modal on mobile

---
 .../src/javascripts/Components/AlertDialog/AlertDialog.tsx   | 5 +++--
 .../Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx b/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx
index 7a55b4dce..213faeb20 100644
--- a/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx
+++ b/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx
@@ -16,13 +16,14 @@ const AlertDialog = ({
   return (
     <Dialog store={dialog} role="alertdialog" className="h-full w-full" backdropProps={{ className: '!z-modal' }}>
       <div
-        className="absolute z-0 h-full w-full bg-passive-5 opacity-0 md:opacity-75"
+        className="absolute z-0 h-full w-full bg-passive-5 opacity-25 md:opacity-75"
         role="presentation"
         onClick={closeDialog}
       />
       <div
         className={classNames(
-          'absolute top-1/2 left-1/2 z-[1] max-w-[600px] -translate-x-1/2 -translate-y-1/2 rounded border border-border bg-default px-6 py-5 shadow-xl',
+          'absolute top-1/2 left-1/2 z-[1] -translate-x-1/2 -translate-y-1/2 rounded border border-border bg-default px-6 py-5 shadow-xl',
+          !className?.includes('max-w-') && 'max-w-[600px]',
           className,
         )}
       >
diff --git a/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx b/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx
index 018dd130e..341d336d5 100644
--- a/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx
+++ b/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx
@@ -30,7 +30,7 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
   }
 
   return (
-    <AlertDialog closeDialog={onClose} className="!max-w-89">
+    <AlertDialog closeDialog={onClose} className="w-full max-w-[90vw] md:max-w-89">
       <div tabIndex={-1} className="sn-component bg-default">
         <div tabIndex={0}>
           {type === PremiumFeatureModalType.UpgradePrompt && (