From f0173e7bb323f7a34c9bf8d5097ce1bbf3415d62 Mon Sep 17 00:00:00 2001
From: Camerin <figueroa0609@protonmail.com>
Date: Sun, 12 Jun 2022 14:36:51 -0400
Subject: [PATCH] Contact Modal - More space within mobile view

---
 src/components/css/Modal.css                 | 25 +++++++++++++++++++-
 src/components/subcomponents/ContactModal.js |  2 +-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/css/Modal.css b/src/components/css/Modal.css
index 77b5c65..0040b88 100644
--- a/src/components/css/Modal.css
+++ b/src/components/css/Modal.css
@@ -54,7 +54,30 @@
     height: fit-content;
 }
 
-.modal input.large {
+.modal textarea {
+    display:flex;
+    text-align: start;
+    justify-content: start;
+}
+
+.modal textarea.large {
     height: 10rem;
     width: 20rem;
+}
+
+@media only screen and (max-width: 600px) {
+
+    .modal .box {
+        border: 2px solid #544545;
+        border-radius: 10px;
+        background-color: white;
+        padding: 25px;
+        max-width: 80vw;
+    }
+
+    .modal textarea.large {
+        height: 15rem;
+        width: auto;
+    }
+
 }
\ No newline at end of file
diff --git a/src/components/subcomponents/ContactModal.js b/src/components/subcomponents/ContactModal.js
index c69b91d..3ff458f 100644
--- a/src/components/subcomponents/ContactModal.js
+++ b/src/components/subcomponents/ContactModal.js
@@ -26,7 +26,7 @@ const ContactModal = props => {
         // Render the contact modal form
         return (
         <form onSubmit={(e)=>onSubmit(e)}>
-            <input className="large" onKeyUp={(e)=>{props.updateEmailBody(e);}}/>
+            <textarea className="large" onKeyUp={(e)=>{props.updateEmailBody(e);}}/>
             <button>Open In Email Editor</button>
         </form>
         );