Fix payment request modal UI

packages/frontend/src/components/projects/create/Configure.tsx

@@ -302,7 +302,7 @@ const Configure = () => {
 
         toast({
           id: 'sending-payment-request',
-          title: 'Check your wallet and approve payment request',
+          title: 'Check and approve payment request',
           variant: 'loading',
           onDismiss: dismiss,
         });

packages/frontend/src/components/projects/create/IFrame.tsx

@@ -95,10 +95,15 @@ const IFrame = ({
             top: '50%',
             left: '50%',
             transform: 'translate(-50%, -50%)',
-            width: '800px',
+            width: '90%',
+            maxWidth: '1200px',
+            height: '600px',
+            maxHeight: '80vh',
+            overflow: 'auto',
             boxShadow: 24,
             borderRadius: '8px',
             outline: 'none',
+            bgcolor: 'background.paper',
           }}
         >
           <iframe
@@ -106,20 +111,12 @@ const IFrame = ({
             id="walletIframe"
             src="http://localhost:3001/WalletEmbed"
             width="100%"
-            height="300"
+            height="100%"
             sandbox="allow-scripts allow-same-origin"
             className="border rounded-md shadow-sm"
           ></iframe>
         </Box>
       </Modal>
-      {/* <iframe
-        onLoad={getDataFromWallet}
-        id="walletIframe"
-        src="http://localhost:3001"
-        width="0"
-        height="0"
-        sandbox="allow-scripts allow-same-origin"
-      ></iframe> */}
     </div>
   );
 };