From 73df853c78980f5d2b722448e23625704ac795fc Mon Sep 17 00:00:00 2001
From: Camerin Figueroa <cam@camscode.com>
Date: Wed, 15 Jun 2022 20:33:31 -0400
Subject: [PATCH] Modal - enters from top on mobile

---
 src/components/css/Modal.css | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/css/Modal.css b/src/components/css/Modal.css
index c0d0d5f..e33d6a3 100644
--- a/src/components/css/Modal.css
+++ b/src/components/css/Modal.css
@@ -11,6 +11,7 @@
     justify-content: center;
     align-items: center;
     transition: opacity 300ms ease-out 50ms, width 300ms ease-out 50ms, background-color 80ms ease-out;
+    overflow: hidden;
 }
 .modal.hide * {
     visibility: hidden;
@@ -20,7 +21,7 @@
 
 .modal.show {
     display:flex;
-    width: 100%;
+    width: 100vw;
     background-color: rgba(0,0,0,0.4);
     opacity: 1;
     transition: opacity 300ms ease-in, width 300ms ease-in, background-color 300ms ease-in 200ms;
@@ -71,8 +72,18 @@
         border: 2px solid #544545;
         border-radius: 10px;
         background-color: white;
-        padding: 25px;
-        max-width: 80vw;
+        padding: 1.5rem;
+        max-width: 90vw;
+        width: 30rem;
+    }
+
+    .modal .box .content {
+        padding: 0;
+        margin: 0;
+    }
+
+    .modal .box .title {
+        text-align: center;
     }
 
     .modal textarea.large {
@@ -80,4 +91,16 @@
         width: auto;
     }
 
+    .modal {
+        width:100vw;
+        height:0;
+        transition: opacity 300ms ease-out 50ms, height 300ms ease-out 50ms, background-color 80ms ease-out;
+    }
+
+    .modal.show {
+        height:100vh;
+        transition: opacity 300ms ease-in, height 300ms ease-in, background-color 300ms ease-in 200ms;
+
+    }
+
 }
\ No newline at end of file