From 672f0eade49cf763da72f6cca648e2be3ae61b83 Mon Sep 17 00:00:00 2001
From: Lucas Lara <llara@localhost>
Date: Tue, 8 Apr 2025 10:05:09 +0200
Subject: [PATCH] refs #1805 Enhance clients table layout and styling for
 improved readability and responsiveness

---
 .../components/groups/groups.component.css    | 36 +++++++++++++++++--
 .../components/groups/groups.component.html   |  2 +-
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css
index 9f05ec3..1f792c4 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.css
+++ b/ogWebconsole/src/app/components/groups/groups.component.css
@@ -87,6 +87,17 @@
   .cards-view {
     max-height: none !important;
   }
+
+  .clients-table {
+    max-height: unset !important;
+    overflow: unset !important; 
+    display: table !important; 
+    flex-direction: unset !important;
+  }
+
+  .clients-container {
+    padding: 0em 1em 0em 1em !important;
+  }
 }
 
 @media (max-width: 1400px) {
@@ -171,16 +182,35 @@
   padding-left: 1rem;
 }
 
+.list-view {
+  overflow-x: auto;
+}
+
 .clients-table {
   max-height: calc(100vh - 330px);
   overflow: auto;
   display: flex;
   flex-direction: column;
+  width: 100%;
+  table-layout: auto; 
+  border-collapse: collapse;
 }
 
-.clients-table table {
-  flex-grow: 1;
-  overflow: auto;
+.clients-table th,
+.clients-table td {
+  text-align: left;
+  padding: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.clients-table th {
+  font-weight: 500;
+}
+
+.clients-table td {
+  border-bottom: 1px solid #ddd;
 }
 
 .paginator-container {
diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index 32bac8a..a01b4b9 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -336,7 +336,7 @@
                     <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'name' | translate }} </th>
                     <td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}"
                       matTooltipPosition="left" matTooltipShowDelay="500">
-                      <p style="font-weight: 500;">{{ client.name }}</p>
+                      <p>{{ client.name }}</p>
                     </td>
                   </ng-container>
                   <ng-container matColumnDef="ip">