From 413c2aff8c69d848dd3ac35c3b7a465d0644cb27 Mon Sep 17 00:00:00 2001
From: Dhruv Rajpoot <138675398+dhruvsingh33@users.noreply.github.com>
Date: Sun, 6 Apr 2025 20:43:04 +0530
Subject: [PATCH] Fix: Make clients page responsive for all screens (#2383)

---
 src/app/clients/clients.component.html |  2 +-
 src/app/clients/clients.component.scss | 62 ++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/src/app/clients/clients.component.html b/src/app/clients/clients.component.html
index 40d972ce5..df0ccfaab 100644
--- a/src/app/clients/clients.component.html
+++ b/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
diff --git a/src/app/clients/clients.component.scss b/src/app/clients/clients.component.scss
index 73b4eaa08..af8633cbc 100644
--- a/src/app/clients/clients.component.scss
+++ b/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%;
+    }
+  }
+}
\ No newline at end of file