From 701ca538d4477c36dbaa09fd94113a4aa518d2e0 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 19:33:55 +0200
Subject: [PATCH] fix

---
 .../features/files/files-page.component.html  | 18 +++++++++++++++---
 frontend/src/assets/i18n/en.json              |  1 +
 frontend/src/assets/i18n/es.json              |  1 +
 frontend/src/assets/i18n/no.json              |  1 +
 frontend/src/assets/i18n/pl.json              |  1 +
 frontend/src/styles/pages.css                 | 19 +++++++++++++++++++
 6 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/features/files/files-page.component.html b/frontend/src/app/features/files/files-page.component.html
index afecc08..7c1ebac 100644
--- a/frontend/src/app/features/files/files-page.component.html
+++ b/frontend/src/app/features/files/files-page.component.html
@@ -87,7 +87,7 @@
 </app-section-card>
 
 <app-section-card class="repository-table-section" [title]="'files.tableTitle' | translate" [subtitle]="'files.tableSubtitle' | translate">
-  <p-table [value]="files" [(selection)]="selected" dataKey="id" [rows]="10" [loading]="loading" [paginator]="files.length > 10" responsiveLayout="scroll" styleClass="app-table repository-table">
+  <p-table [value]="files" [(selection)]="selected" dataKey="id" [rows]="10" [loading]="loading" [paginator]="files.length > 10" responsiveLayout="stack" [breakpoint]="'960px'" styleClass="app-table repository-table">
     <ng-template pTemplate="header">
       <tr>
         <th style="width:3rem"></th>
@@ -102,25 +102,36 @@
     </ng-template>
     <ng-template pTemplate="body" let-item>
       <tr [attr.data-compare-role]="compareRole(item)">
-        <td><p-tableCheckbox [value]="item"></p-tableCheckbox></td>
         <td>
+          <span class="p-column-title">{{ 'files.selectColumn' | translate }}</span>
+          <p-tableCheckbox [value]="item"></p-tableCheckbox>
+        </td>
+        <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">{{ deviceLabel(item) }} · ID {{ item.router_id }}</small>
         </td>
-        <td><p-tag [value]="item.backup_type === 'export' ? ('files.exportType' | translate) : ('files.binaryType' | translate)" [severity]="item.backup_type === 'export' ? 'success' : 'warn'"></p-tag></td>
         <td>
+          <span class="p-column-title">{{ 'files.typeColumn' | translate }}</span>
+          <p-tag [value]="item.backup_type === 'export' ? ('files.exportType' | translate) : ('files.binaryType' | translate)" [severity]="item.backup_type === 'export' ? 'success' : 'warn'"></p-tag>
+        </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.sizeColumn' | translate }}</span>
           <div class="table-primary">{{ formatBytes(item.file_size) }}</div>
           <small class="table-secondary">{{ fileExtension(item) }}</small>
         </td>
         <td>
+          <span class="p-column-title">{{ 'files.compareColumn' | translate }}</span>
           <div class="table-actions table-actions--stack" *ngIf="item.backup_type === 'export'; else noCompare">
             <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>
@@ -131,6 +142,7 @@
           </ng-template>
         </td>
         <td>
+          <span class="p-column-title">{{ 'files.actionsColumn' | 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" icon="pi pi-download" [label]="'common.download' | translate" (click)="download(item.id)"></button>
             <button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="secondary" icon="pi pi-envelope" [label]="'common.email' | translate" (click)="sendEmail(item.id)"></button>
diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json
index 66ed8f8..097d09c 100644
--- a/frontend/src/assets/i18n/en.json
+++ b/frontend/src/assets/i18n/en.json
@@ -288,6 +288,7 @@
     "tableSubtitle": "Artifacts available for download, e-mail and restore.",
     "compareHint": "Select exactly two .rsc files to compare them.",
     "compareSelected": "Compare selected exports",
+    "selectColumn": "Select",
     "fileColumn": "File",
     "typeColumn": "Type",
     "routerColumn": "Device",
diff --git a/frontend/src/assets/i18n/es.json b/frontend/src/assets/i18n/es.json
index 5f08516..1cade1d 100644
--- a/frontend/src/assets/i18n/es.json
+++ b/frontend/src/assets/i18n/es.json
@@ -270,6 +270,7 @@
     "tableSubtitle": "Artefactos disponibles para descarga, correo y restauración.",
     "compareHint": "Selecciona exactamente dos archivos .rsc para compararlos.",
     "compareSelected": "Comparar exportaciones seleccionadas",
+    "selectColumn": "Seleccionar",
     "fileColumn": "Archivo",
     "typeColumn": "Tipo",
     "routerColumn": "Dispositivo",
diff --git a/frontend/src/assets/i18n/no.json b/frontend/src/assets/i18n/no.json
index 2d08a5f..60a852e 100644
--- a/frontend/src/assets/i18n/no.json
+++ b/frontend/src/assets/i18n/no.json
@@ -270,6 +270,7 @@
     "tableSubtitle": "Artefakter tilgjengelige for nedlasting, e-post og gjenoppretting.",
     "compareHint": "Velg nøyaktig to .rsc-filer for å sammenligne dem.",
     "compareSelected": "Sammenlign valgte exporter",
+    "selectColumn": "Velg",
     "fileColumn": "Fil",
     "typeColumn": "Type",
     "routerColumn": "Enhet",
diff --git a/frontend/src/assets/i18n/pl.json b/frontend/src/assets/i18n/pl.json
index f1aee4f..7f1d32b 100644
--- a/frontend/src/assets/i18n/pl.json
+++ b/frontend/src/assets/i18n/pl.json
@@ -288,6 +288,7 @@
     "tableSubtitle": "Artefakty dostępne do pobrania, wysyłki e-mail i przywracania.",
     "compareHint": "Zaznacz dokładnie dwa pliki .rsc, aby je porównać.",
     "compareSelected": "Porównaj zaznaczone exporty",
+    "selectColumn": "Zaznacz",
     "fileColumn": "Plik",
     "typeColumn": "Typ",
     "routerColumn": "Urządzenie",
diff --git a/frontend/src/styles/pages.css b/frontend/src/styles/pages.css
index 083351e..567ac49 100644
--- a/frontend/src/styles/pages.css
+++ b/frontend/src/styles/pages.css
@@ -3487,3 +3487,22 @@ body.dark-theme .device-toggle.is-active{background:linear-gradient(135deg,color
   .mobile-actions-menu summary{margin-left:auto;}
   .mobile-actions-menu__list{position:static;right:auto;top:auto;min-inline-size:0;width:100%;margin-top:10px;}
 }
+
+@media (max-width: 960px) {
+  .repository-table.app-table .p-datatable-tbody > tr > td{
+    align-items: flex-start;
+    gap: 0.45rem;
+  }
+
+  .repository-table .table-actions--stack,
+  .repository-table .table-actions--labels{
+    width: 100%;
+  }
+
+  .repository-table .p-button.table-action-btn,
+  .repository-table .p-button.table-action-btn--wide,
+  .repository-table .p-button.table-action-btn--compact{
+    width: 100%;
+    justify-content: center;
+  }
+}