Fix: Make clients page responsive for all screens (#2383)

src/app/clients/clients.component.html

@@ -1,5 +1,5 @@
 <mat-card class="container">
-  <div fxLayout="row" fxLayoutAlign="start center">
+  <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center">
     <div class="search-box m-r-30">
       <mat-form-field class="search-box">
         <input

src/app/clients/clients.component.scss

@@ -105,3 +105,65 @@ $color: #e2e4ec;
     width: $bar;
   }
 }
+@media (max-width: 768px) {
+  .container {
+    .search-box,
+    .filter-box,
+    .action-button {
+      width: 100%;
+      margin-bottom: 15px;
+    }
+
+    .search-box mat-form-field {
+      width: 100%;
+    }
+
+    .action-button {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      align-items: stretch;
+    }
+
+    .filter-box {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  table {
+    width: 100%;
+    overflow-x: auto;
+    display: block;
+
+    thead,
+    tbody,
+    tr,
+    th,
+    td {
+      white-space: nowrap;
+    }
+  }
+
+  .mat-paginator {
+    overflow-x: auto;
+    display: block;
+  }
+
+  .alert {
+    text-align: center;
+    padding: 10px;
+  }
+}
+@media screen and (max-width: 768px) {
+  .action-button {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    button {
+      width: 100%;
+    }
+  }
+}