fix width

client/src/components/JoinMCDi.tsx

@@ -159,31 +159,30 @@ const JoinMCDi: React.FC = () => {
         <JoinButton onClick={handleJoinClick} />
 
         <Modal
-        isOpen={isModalOpen}
-        onRequestClose={closeModal}
-        contentLabel="Join MCDi Membership Form"
-        className="modal"
-        overlayClassName="overlay"
-        style={{content: {overflow: 'hidden'}}}
-        >
-        <div className="h-full flex flex-col">
-            <h2 className="text-2xl font-bold text-[#8C1D40] mb-4">Join MCDi Membership Form</h2>
-            <div className="flex-grow overflow-y-auto">
-            <iframe
-                src="https://www.zeffy.com/embed/ticketing/ec0af9d1-4f07-4156-a6cc-0fa0878b512b"
-                width="100%"
-                height="100%"
-                frameBorder="0"
-            ></iframe>
-            </div>
-            <button
-            onClick={closeModal}
-            className="mt-4 bg-[#8C1D40] text-white font-bold py-2 px-4 rounded"
-            >
-            Close
-            </button>
-        </div>
-        </Modal>
+  isOpen={isModalOpen}
+  onRequestClose={closeModal}
+  contentLabel="Join MCDi Membership Form"
+  className="modal"
+  overlayClassName="overlay"
+>
+  <div className="h-full flex flex-col">
+    <h2 className="text-2xl font-bold text-[#8C1D40] mb-4">Join MCDi Membership Form</h2>
+    <div className="flex-grow overflow-y-auto">
+      <iframe
+        src="https://www.zeffy.com/embed/ticketing/ec0af9d1-4f07-4156-a6cc-0fa0878b512b"
+        width="100%"
+        height="100%"
+        frameBorder="0"
+      ></iframe>
+    </div>
+    <button
+      onClick={closeModal}
+      className="mt-4 bg-[#8C1D40] text-white font-bold py-2 px-4 rounded"
+    >
+      Close
+    </button>
+  </div>
+</Modal>
 
       </motion.div>
       {isLoading && (

client/src/index.css

@@ -117,9 +117,10 @@ html {
   background-color: white;
   padding: 20px;
   border-radius: 8px;
-  width: 60vw;
-  height: 60vh;
-  overflow-y: hidden;
+  width: 80%;
+  max-width: 1000px;
+  height: 90vh;
+  overflow: hidden;
 }
 
 .overlay {
@@ -129,4 +130,5 @@ html {
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.75);
+  overflow-y: auto;
 }