[PRAC/cont] Check layout/app for "overflow"

Organiz CRM-app test for/on el/content "overflow" (min testing).

Worth noting:
  - that it's an attempt to avoid unforeseen future behavior.

core: B-3 / JS-BL

Author: matowdev

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

@@ -2,29 +2,36 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  column-gap: 10px;
   padding-right: var(--container-padding);
   padding-left: var(--container-padding);
 }
 
 .crm__add-btn-wrap {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
   padding-bottom: 30px;
 }
 
 .crm__add-btn {
   display: flex;
+  flex-wrap: wrap;
   justify-content: flex-end;
   align-items: center;
   position: relative;
   border: 1px solid var(--main-purple);
   padding: 12px 25px;
   padding-right: 29px;
   min-width: 217px;
+  max-width: 217px;
   font-family: var(--open-sans), sans-serif;
   font-weight: var(--semi-bold);
   font-size: var(--default-fs);
   color: var(--main-purple);
   background: transparent;
   outline: none;
+  text-align: right;
   transition-property: border, color, background-color;
   transition-duration: var(--short);
   transition-timing-function: ease;

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

@@ -9,16 +9,12 @@
 
 .crm__output-title-wrap {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   column-gap: 2px;
   margin-bottom: 12px;
 }
 
-.crm__output-title {
-  font-weight: var(--semi-bold);
-  font-size: 28px;
-}
-
 .crm__output-title-hash {
   font-weight: var(--semi-bold);
   font-size: 32px;
@@ -37,6 +33,15 @@
   color: var(--gray);
 }
 
+.crm__output-title {
+  font-weight: var(--semi-bold);
+  font-size: 28px;
+}
+
+.crm__output-title:not(:last-of-type) {
+  margin-right: 10px;
+}
+
 .crm__output-table-wrap {
   padding: 3px;
 }
@@ -52,6 +57,10 @@
   table-layout: fixed;
 }
 
+.crm__output-table:not(:last-of-type) {
+  margin-bottom: 10px;
+}
+
 .crm__output-table tbody {
   display: table;
   width: 1180px;
@@ -106,20 +115,29 @@
   width: 195px;
 }
 
+.crm__output-table #table-th-dt {
+  padding-left: 4px;
+}
+
 .crm__output-table #table-th-change,
 .crm__output-table .crm__output-table-body-cell_chg-d-time {
   width: 195px;
 }
 
-.crm__output-table #table-th-contact {
-  cursor: default;
+.crm__output-table #table-th-change {
+  padding-left: 3px;
 }
 
 .crm__output-table #table-th-contact,
 .crm__output-table .crm__output-table-body-cell_contacts {
   width: 130px;
 }
 
+.crm__output-table #table-th-contact {
+  padding-left: 3px;
+  cursor: default;
+}
+
 .crm__output-table #table-th-action {
   cursor: default;
 }
@@ -212,6 +230,16 @@
   color: var(--text-gray);
 }
 
+.crm__output-table-body-cell_crt-d-time-wrap {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.crm__output-table-body-cell_chg-d-time-wrap {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .crm__output-table-body-cell_crt-date,
 .crm__output-table-body-cell_chg-date {
   margin-right: 8px;
@@ -284,8 +312,10 @@
 
 .crm__output-table-body-cell_actions-btns-wrap {
   display: flex;
+  flex-wrap: wrap;
   justify-content: flex-start;
-  column-gap: 5px;
+  column-gap: 2px;
+  width: 205px;
 }
 
 .table-row-btn {

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

@@ -15,7 +15,10 @@
 }
 
 .crm__search-logo-wrap {
+  display: flex;
+  flex-wrap: wrap;
   flex-shrink: 0;
+  gap: 10px;
   margin-right: 55px;
 }
 

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

@@ -34,21 +34,23 @@ body.modal-open {
 }
 
 .modal-delete__header {
-  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  column-gap: 5px;
   margin-bottom: 11px;
 }
 
 .modal-delete__header-title {
-  margin-right: 10px;
   font-weight: var(--bold);
   font-size: 18px;
   color: var(--black);
 }
 
 .modal-delete__header .modal-delete__header-x-btn {
-  position: relative;
-  top: -12px;
-  right: -105px;
+  position: absolute;
+  top: 22px;
+  right: 17px;
   padding: 5px;
 }
 
@@ -67,6 +69,14 @@ body.modal-open {
   text-align: center;
 }
 
+.modal-delete__body-text:not(:last-of-type) {
+  margin-bottom: 10px;
+}
+
+.modal-delete__footer {
+  column-gap: 10px;
+}
+
 .modal-delete__footer-btns-wrap {
   display: flex;
   flex-direction: column;
@@ -137,7 +147,7 @@ body.modal-open {
   }
 
   .modal-delete__header .modal-delete__header-x-btn {
-    right: -32px;
+    right: 15px;
   }
 }
 
@@ -156,7 +166,7 @@ body.modal-open {
   }
 
   .modal-delete__header .modal-delete__header-x-btn {
-    right: -52px;
+    right: 15px;
   }
 
   .modal-delete__body {

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

@@ -170,14 +170,17 @@ body.modal-open {
 
 .modal__body-add-btn {
   display: flex;
+  flex-wrap: wrap;
   justify-content: flex-end;
   align-items: center;
   position: relative;
   padding: 10px 20px;
   min-width: 191px;
+  max-width: 191px;
   font-family: var(--open-sans), sans-serif;
   font-weight: var(--semi-bold);
   font-size: var(--default-fs);
+  text-align: end;
   transition-property: color, background-color;
   transition-duration: var(--short);
   transition-timing-function: ease;
@@ -217,6 +220,10 @@ body.modal-open {
   margin-bottom: 15px;
 }
 
+.modal-contact-btn-margin:not(:last-of-type) {
+  margin-bottom: 0;
+}
+
 .modal__body-contacts-wrap {
   display: flex;
   flex-direction: column;