[PRAC/cont] Add @daptation for modal windows

Correct behavior/styles for 3 modal windows on "main" bp's/@media.

Worth noting:
  - excluding the addition/obscure inline "padding-right" for modal windows at small resolutions.

core: B-3 / JS-BL

Author: matowdev

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/modal-delete.css

@@ -1,7 +1,15 @@
+.modal {
+  padding-right: 0px !important;
+}
+
+body.modal-open {
+  padding-right: 0px !important;
+}
+
 .modal-delete__dialog {
   position: relative;
-  top: 220px;
-  left: 25px;
+  top: 210px;
+  max-width: 450px;
 }
 
 .modal-delete__content-wrap {
@@ -11,7 +19,6 @@
   border: none;
   border-radius: 0;
   padding: 25px 30px;
-  max-width: 450px;
   outline: none;
 }
 
@@ -27,10 +34,12 @@
 }
 
 .modal-delete__header {
+  display: flex;
   margin-bottom: 11px;
 }
 
 .modal-delete__header-title {
+  margin-right: 10px;
   font-weight: var(--bold);
   font-size: 18px;
   color: var(--black);
@@ -39,7 +48,7 @@
 .modal-delete__header .modal-delete__header-x-btn {
   position: relative;
   top: -12px;
-  right: -110px;
+  right: -105px;
   padding: 5px;
 }
 
@@ -120,6 +129,56 @@
 
 /* media queries, any-hover */
 
+@media (max-width: 576px) {
+  .modal-delete__dialog {
+    top: 230px;
+    margin: 0 auto;
+    max-width: 300px;
+  }
+
+  .modal-delete__header .modal-delete__header-x-btn {
+    right: -32px;
+  }
+}
+
+@media (max-width: 320px) {
+  .modal-delete__dialog {
+    top: 170px;
+  }
+
+  .modal-backdrop {
+    width: 100vh;
+    height: 100vh;
+  }
+
+  .modal-delete__header-title {
+    font-size: 14px;
+  }
+
+  .modal-delete__header .modal-delete__header-x-btn {
+    right: -52px;
+  }
+
+  .modal-delete__body {
+    margin-bottom: 15px;
+  }
+
+
+  .modal-delete__body-text {
+    font-size: 12px;
+  }
+
+  .modal-delete__footer-delete-btn {
+    padding: 5px 25px;
+    max-width: 100px;
+    font-size: 13px;
+  }
+
+  .modal-delete__footer-cancel-btn {
+    font-size: 13px;
+  }
+}
+
 @media (any-hover: hover) {
   .modal-delete__footer-delete-btn:hover:not(:active) {
     background-color: var(--light-purple);

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/modal-type.css

@@ -1,15 +1,22 @@
+.modal {
+  padding-right: 0px !important;
+}
+
+body.modal-open {
+  padding-right: 0px !important;
+}
+
 .modal__dialog {
   position: relative;
-  top: 220px;
-  left: 25px;
+  top: 210px;
+  max-width: 450px;
 }
 
 .modal__content-wrap {
   border: none;
   border-radius: 0;
   padding-top: 25px;
   padding-bottom: 25px;
-  max-width: 450px;
   outline: none;
 }
 
@@ -32,6 +39,7 @@
 
 .modal__header-title-wrap {
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
   align-items: baseline;
 }
@@ -441,6 +449,41 @@
 
 /* media queries, any-hover */
 
+@media (max-width: 576px) {
+  .modal__dialog {
+    top: 230px;
+    margin: 0 auto;
+    max-width: 300px;
+  }
+
+  .modal__header-title-wrap {
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 320px) {
+  .modal__dialog {
+    top: 170px;
+  }
+
+  .modal-backdrop {
+    width: 100vh;
+    height: 100vh;
+  }
+
+  .modal__header {
+    margin-bottom: 12px;
+  }
+
+  .modal__header-title {
+    font-size: 14px;
+  }
+
+  .modal__header-client-id {
+    font-size: 10px;
+  }
+}
+
 @media (any-hover: hover) {
   .modal__body-add-btn:hover:not(:active):not(:disabled) .modal__body-add-btn-icon.plus-circle-stroke {
     opacity: 0;