From b02a2f3a8e857b3587f13700961b331ec36062cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?=
 <mateusz.gruszczynski@firma.interia.pl>
Date: Tue, 14 Apr 2026 20:22:53 +0200
Subject: [PATCH] table fix

---
 .../diff-configs-page.component.html          |  6 ++-
 frontend/src/styles/pages.css                 | 41 ++++++++++++++++---
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/features/diff-configs/diff-configs-page.component.html b/frontend/src/app/features/diff-configs/diff-configs-page.component.html
index 0c63037..0ebd29f 100644
--- a/frontend/src/app/features/diff-configs/diff-configs-page.component.html
+++ b/frontend/src/app/features/diff-configs/diff-configs-page.component.html
@@ -62,7 +62,7 @@
 </app-section-card>
 
 <app-section-card class="diff-configs-table-section" [title]="'diffConfigs.tableTitle' | translate" [subtitle]="'diffConfigs.tableSubtitle' | translate">
-  <p-table [value]="exportFiles" [loading]="loading" [rows]="8" [paginator]="exportFiles.length > 8" responsiveLayout="scroll" styleClass="app-table repository-table">
+  <p-table [value]="exportFiles" [loading]="loading" [rows]="8" [paginator]="exportFiles.length > 8" responsiveLayout="stack" [breakpoint]="'960px'" styleClass="app-table repository-table">
     <ng-template pTemplate="header">
       <tr>
         <th>{{ 'files.fileColumn' | translate }}</th>
@@ -74,18 +74,22 @@
     <ng-template pTemplate="body" let-item>
       <tr>
         <td>
+          <span class="p-column-title">{{ 'files.fileColumn' | translate }}</span>
           <div class="table-primary">{{ item.file_name }}</div>
           <small class="table-secondary">{{ 'files.checksum' | translate }}: {{ checksumShort(item.checksum) }}</small>
         </td>
         <td>
+          <span class="p-column-title">{{ 'files.routerColumn' | translate }}</span>
           <div class="table-primary">{{ item.router_name || item.router_id }}</div>
           <small class="table-secondary">ID {{ item.router_id }}</small>
         </td>
         <td>
+          <span class="p-column-title">{{ 'files.createdColumn' | translate }}</span>
           <div class="table-primary">{{ item.created_at | date: 'dd.MM.yyyy HH:mm' }}</div>
           <small class="table-secondary">{{ relativeAge(item.created_at) }}</small>
         </td>
         <td>
+          <span class="p-column-title">{{ 'files.compareColumn' | translate }}</span>
           <div class="table-actions table-actions--labels table-actions--stack">
             <button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="secondary" icon="pi pi-arrow-left" [label]="'files.setOlder' | translate" (click)="assignCompare('left', item)"></button>
             <button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="secondary" icon="pi pi-arrow-right" [label]="'files.setNewer' | translate" (click)="assignCompare('right', item)"></button>
diff --git a/frontend/src/styles/pages.css b/frontend/src/styles/pages.css
index 567ac49..0726ef3 100644
--- a/frontend/src/styles/pages.css
+++ b/frontend/src/styles/pages.css
@@ -702,8 +702,6 @@ body.dark-theme .app-table .p-datatable-tbody > tr:hover > td{
 
 
 
-
-
 .p-avatar{
   background: var(--primary);
   color: #fff;
@@ -711,8 +709,6 @@ body.dark-theme .app-table .p-datatable-tbody > tr:hover > td{
 }
 
 
-
-
 .p-dialog{
   border-radius: 20px;
   overflow: hidden;
@@ -2553,12 +2549,22 @@ app-page-header{
 .repository-table .table-primary{
   font-size: 0.88rem;
   line-height: 1.35;
+  min-width: 0;
+  max-width: 100%;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .repository-table .table-secondary{
   margin-top: 0.18rem;
   font-size: 0.74rem;
   line-height: 1.35;
+  min-width: 0;
+  max-width: 100%;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .repository-table .p-tag{
@@ -2568,24 +2574,33 @@ app-page-header{
 
 
 
-.repository-table .p-datatable-tbody > tr > td:first-child, .repository-table .p-datatable-thead > tr > th:first-child{
+.repository-table .p-datatable-thead > tr > th:first-child{
   width: 2.6rem;
   padding-inline: 0.55rem;
 }
 
+.repository-table .p-datatable-tbody > tr > td:first-child{
+  padding-inline: 0.55rem;
+}
+
 .repository-table .table-actions--stack{
   gap: 0.38rem;
+  min-width: 0;
 }
 
 .repository-table .p-button.table-action-btn, .repository-table .p-button.table-action-btn--wide, .repository-table .p-button.table-action-btn--compact{
   min-height: 1.9rem;
+  min-width: 0;
+  max-width: 100%;
   padding: 0.45rem 0.62rem;
   font-size: 0.7rem;
   letter-spacing: 0.09em;
 }
 
 .repository-table .p-button .p-button-label{
-  white-space: nowrap;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .repository-table .p-button .p-button-icon{
@@ -3489,14 +3504,28 @@ body.dark-theme .device-toggle.is-active{background:linear-gradient(135deg,color
 }
 
 @media (max-width: 960px) {
+  .repository-table.app-table .p-datatable-wrapper{
+    overflow-x: hidden;
+  }
+
+  .repository-table.app-table .p-datatable-table{
+    width: 100% !important;
+    table-layout: fixed;
+  }
+
   .repository-table.app-table .p-datatable-tbody > tr > td{
     align-items: flex-start;
     gap: 0.45rem;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
   }
 
   .repository-table .table-actions--stack,
   .repository-table .table-actions--labels{
     width: 100%;
+    min-width: 0;
   }
 
   .repository-table .p-button.table-action-btn,