style: improve layout responsiveness and clean up SCSS formatting

- Set max-width and overflow properties for body and campaigns-page to enhance responsiveness.
- Adjust flex properties and min-width for filter groups to ensure proper layout.
- Refactor spacing and formatting for better readability in various sections.
- Hide scrollbars for specific elements to improve aesthetics.
- Ensure consistent formatting for nested selectors and properties.

layout/style.scss

@@ -37,6 +37,8 @@ body {
   font-size: 14px;
   color: $cText;
   background: $cContentBg;
+  max-width: 100vw;
+  overflow: hidden;
 }
 
 .hide {
@@ -474,7 +476,7 @@ body.logged {
           }
         }
 
-        &.active > .nav-group-label {
+        &.active>.nav-group-label {
           color: $cWhite;
           background: rgba($cPrimary, 0.12);
           border-left-color: $cPrimary;
@@ -993,7 +995,7 @@ table {
   .settings-toggle-checkbox {
     display: none;
 
-    & + .settings-toggle-switch {
+    &+.settings-toggle-switch {
       display: inline-block;
       position: relative;
       width: 44px;
@@ -1016,7 +1018,7 @@ table {
       }
     }
 
-    &:checked + .settings-toggle-switch {
+    &:checked+.settings-toggle-switch {
       background: #22C55E;
 
       &::after {
@@ -1205,6 +1207,10 @@ table {
 // CAMPAIGNS PAGE
 // ===========================
 .campaigns-page {
+  max-width: 100%;
+  overflow-x: hidden;
+  width: 100%;
+
   .campaigns-header {
     display: flex;
     justify-content: space-between;
@@ -1226,11 +1232,13 @@ table {
 
   .campaigns-filters {
     display: flex;
+    flex-wrap: wrap;
     gap: 20px;
     margin-bottom: 20px;
 
     .filter-group {
       flex: 1;
+      min-width: 0;
 
       label {
         display: block;
@@ -1311,13 +1319,25 @@ table {
     padding: 20px;
     margin-bottom: 20px;
     min-height: 350px;
+    overflow: hidden;
+
+    #container {
+      max-width: 100%;
+    }
   }
 
   .campaigns-table-wrap {
     background: $cWhite;
     border-radius: 10px;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
-    overflow: hidden;
+    overflow-x: auto;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    max-width: 100%;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
 
     .table {
       margin: 0;
@@ -1488,7 +1508,9 @@ table {
         color: #8899A6;
         margin-bottom: 6px;
 
-        i { margin-right: 4px; }
+        i {
+          margin-right: 4px;
+        }
       }
 
       .form-control {
@@ -1519,9 +1541,17 @@ table {
 
       &.filter-group-client,
       &.filter-group-campaign,
-      &.filter-group-ad-group { flex: 1 1 260px; }
-      &.filter-group-roas { flex: 0 0 200px; }
-      &.filter-group-columns { flex: 0 0 240px; }
+      &.filter-group-ad-group {
+        flex: 1 1 260px;
+      }
+
+      &.filter-group-roas {
+        flex: 0 0 200px;
+      }
+
+      &.filter-group-columns {
+        flex: 0 0 240px;
+      }
     }
   }
 
@@ -1714,7 +1744,9 @@ table {
   align-items: center;
   margin-bottom: 4px;
 
-  label { margin: 0; }
+  label {
+    margin: 0;
+  }
 }
 
 .desc-tabs {
@@ -1735,12 +1767,14 @@ table {
   color: #666;
   transition: all .15s ease;
 
-  i { margin-right: 4px; }
+  i {
+    margin-right: 4px;
+  }
 
   &.active {
     background: #fff;
     color: #333;
-    box-shadow: 0 1px 3px rgba(0,0,0,.12);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
     font-weight: 500;
   }
 
@@ -1755,9 +1789,21 @@ table {
 }
 
 .desc-preview {
-  ul, ol { margin: 6px 0; padding-left: 20px; }
-  li { margin-bottom: 3px; }
-  b, strong { font-weight: 600; }
+
+  ul,
+  ol {
+    margin: 6px 0;
+    padding-left: 20px;
+  }
+
+  li {
+    margin-bottom: 3px;
+  }
+
+  b,
+  strong {
+    font-weight: 600;
+  }
 }
 
 .input-with-ai {
@@ -2144,7 +2190,7 @@ table#products {
   background: #E9EEF5;
   overflow: hidden;
 
-  > span {
+  >span {
     display: block;
     height: 100%;
     background: linear-gradient(90deg, #5A9BFF 0%, #2E6BDF 100%);
@@ -2453,7 +2499,7 @@ table#products {
     }
   }
 
-  table.campaigns-extra-table > thead > tr > th {
+  table.campaigns-extra-table>thead>tr>th {
     position: sticky;
     top: 0;
     z-index: 2;
@@ -2941,6 +2987,7 @@ table#products {
 }
 
 #products {
+
   th:last-child,
   td:last-child {
     white-space: nowrap;
@@ -2967,7 +3014,7 @@ table#products {
   }
 }
 
-.products-page table#products > thead > tr > th {
+.products-page table#products>thead>tr>th {
   position: sticky;
   top: 0;
   z-index: 2;
@@ -3030,4 +3077,4 @@ table#products {
   content: '\25BC';
   color: #FFFFFF;
   background: #2563EB;
-}
+}