From 91c178b4502611b370b6cea86ba545a2b049e700 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?=
 <mateusz.gruszczynski@firma.interia.pl>
Date: Wed, 15 Apr 2026 20:13:32 +0200
Subject: [PATCH] fixes in css

---
 .../routers/routers-page.component.html        |  9 +++++++--
 frontend/src/styles/pages.css                  | 18 ++++++++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/features/routers/routers-page.component.html b/frontend/src/app/features/routers/routers-page.component.html
index 4352de4..ae65e2b 100644
--- a/frontend/src/app/features/routers/routers-page.component.html
+++ b/frontend/src/app/features/routers/routers-page.component.html
@@ -22,31 +22,36 @@
 </div>
 
 <app-section-card [title]="'routers.listTitle' | translate" [subtitle]="'routers.listSubtitle' | translate">
-  <p-table [value]="routers" responsiveLayout="stack" [breakpoint]="'960px'" styleClass="app-table repository-table">
+  <p-table [value]="routers" responsiveLayout="stack" [breakpoint]="'960px'" styleClass="app-table repository-table repository-table--routers">
     <ng-template pTemplate="header">
       <tr><th>{{ 'routers.name' | translate }}</th><th>{{ 'routers.endpoint' | translate }}</th><th>{{ 'routers.access' | translate }}</th><th>{{ 'routers.backupPolicy' | translate }}</th><th>{{ 'routers.ping' | translate }}</th><th>{{ 'common.actions' | translate }}</th></tr>
     </ng-template>
     <ng-template pTemplate="body" let-routerItem>
       <tr>
         <td>
-          <div class="table-primary">{{ routerItem.name }}</div>
+          <span class="p-column-title">{{ 'routers.name' | translate }}</span>
+          <div class="table-primary table-primary--ellipsis" [attr.title]="routerItem.name">{{ routerItem.name }}</div>
           <small class="table-secondary">{{ deviceTypeLabel(routerItem) }}</small>
         </td>
         <td>
+          <span class="p-column-title">{{ 'routers.endpoint' | translate }}</span>
           <div class="table-primary">{{ routerItem.host }}:{{ routerItem.port }}</div>
           <small class="table-secondary">{{ accessUser(routerItem) }}</small>
         </td>
         <td>
+          <span class="p-column-title">{{ 'routers.access' | translate }}</span>
           <div class="inline-tags">
             <p-tag [value]="primaryAccessTag(routerItem).value" [severity]="primaryAccessTag(routerItem).severity"></p-tag>
             <p-tag [value]="secondaryAccessTag(routerItem).value" [severity]="secondaryAccessTag(routerItem).severity"></p-tag>
           </div>
         </td>
         <td>
+          <span class="p-column-title">{{ 'routers.backupPolicy' | translate }}</span>
           <div class="table-primary">{{ backupPolicyLabel(routerItem) }}</div>
           <small class="table-secondary" *ngIf="routerItem.disable_all_backups">{{ 'common.disabled' | translate }}</small>
         </td>
         <td>
+          <span class="p-column-title">{{ 'routers.ping' | translate }}</span>
           <small class="table-secondary">{{ pingLabel(routerItem) }}</small>
         </td>
         <td>
diff --git a/frontend/src/styles/pages.css b/frontend/src/styles/pages.css
index 7e399b8..091e44e 100644
--- a/frontend/src/styles/pages.css
+++ b/frontend/src/styles/pages.css
@@ -3138,6 +3138,17 @@ body.dark-theme .device-toggle.is-active{background:linear-gradient(135deg,color
   padding-inline: 0.8rem;
 }
 
+
+.repository-table--routers.app-table .p-datatable-thead > tr > th:first-child,
+.repository-table--routers.app-table .p-datatable-tbody > tr > td:first-child{
+  width: 18%;
+  min-width: 220px;
+  max-width: 0;
+}
+.repository-table--routers .table-primary--ellipsis{
+  max-width: 100%;
+}
+
 .repository-table .table-primary--ellipsis{
   display:block;
   max-width:100%;
@@ -3336,6 +3347,13 @@ body.dark-theme .device-toggle.is-active{background:linear-gradient(135deg,color
     text-overflow:unset;
   }
 
+  .repository-table--routers.app-table .p-datatable-thead > tr > th:first-child,
+  .repository-table--routers.app-table .p-datatable-tbody > tr > td:first-child{
+    width: auto;
+    min-width: 0;
+    max-width: none;
+  }
+
   .repository-table--files.app-table .p-datatable-thead > tr > th:nth-child(2),
   .repository-table--files.app-table .p-datatable-tbody > tr > td:nth-child(2),
   .repository-table--files.app-table .p-datatable-thead > tr > th:nth-child(7),