Set different size for modal screen breakpoints (#441)

* Set different size for modal screen breakpoints

* Better handle variable width and height

* Let's do dynamic sizing

Author: chadweimer

static/src/global/app.css

@@ -155,8 +155,22 @@ ion-content::part(scroll) {
   touch-action: pan-y pinch-zoom;
 }
 
-@media (max-width: 991.98px) {
-  .justify-content-center-lg-down {
-    justify-content: center !important;
+@media only screen and (max-width: 575.98px) and (max-height: 575.98px) {
+  ion-model {
+    --width: 100%;
+    --height: 100%;
+  }
+}
+
+@media only screen and (min-width: 576px) and (min-height: 576px) {
+  ion-modal {
+    --width: 90%;
+    --max-width: 1000px;
+    --height: 90%;
+    --max-height: 1000px;
+    --ion-safe-area-top: 0px;
+    --ion-safe-area-bottom: 0px;
+    --ion-safe-area-right: 0px;
+    --ion-safe-area-left: 0px;
   }
 }