Adjust constrain media values for quick add modal (#2113)

* Adjust constrain media values for quickadd

* Adjust offset logic

* Minor formatting fix

Author: kmeleta

assets/quick-add.css

@@ -30,11 +30,12 @@
 }
 
 .quick-add-modal__content {
+  --modal-height-offset: 3.2rem;
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
-  margin: 3.2rem auto 0;
+  margin: var(--modal-height-offset) auto 0;
   width: 100%;
   background-color: rgb(var(--color-background));
   overflow: hidden;
@@ -44,9 +45,10 @@
 
 @media screen and (min-width: 750px) {
   .quick-add-modal__content {
-    margin-top: 10rem;
+    --modal-height-offset: 10rem;
+    margin-top: var(--modal-height-offset);
     width: 80%;
-    max-height: calc(100% - 20rem);
+    max-height: calc(100% - var(--modal-height-offset) * 2);
     overflow-y: auto;
   }
 
@@ -67,10 +69,11 @@
 }
 
 .quick-add-modal__content-info {
+  --modal-padding: 2.5rem;
   padding-right: 4.4rem;
   display: flex;
   overflow-y: auto;
-  padding: 2.5rem;
+  padding: var(--modal-padding);
   height: 100%;
 }
 
@@ -88,7 +91,7 @@
   }
 
   .quick-add-modal__content {
-    bottom: 3.2rem;
+    bottom: var(--modal-height-offset);
   }
 
   .quick-add-modal__content-info > * {
@@ -210,7 +213,12 @@ quick-add-modal .product-form__buttons {
   box-sizing: border-box;
 }
 
-quick-add-modal .product-media-container.constrain-height .media {
-  /* constrain behavior tbd, negate constrain effects on quick add modal for now */
-  padding-top: var(--ratio-percent);
+quick-add-modal .product-media-container.constrain-height {
+  --viewport-offset: calc((var(--modal-height-offset) + var(--modal-padding) + var(--popup-border-width)) * 2);
+}
+
+@media screen and (min-width: 750px) {
+  quick-add-modal .product-media-container.constrain-height {
+    --constrained-min-height: 400px;
+  }
 }