refs #1805 Enhance clients table layout and styling for improved readability and responsiveness

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 {
+.clients-table th,
-  flex-grow: 1;
+.clients-table td {
-  overflow: auto;
+  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 {

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">