From fa48be17d147809066c2a721635a9e4a24835f33 Mon Sep 17 00:00:00 2001
From: martino <32328813+f3rs3n@users.noreply.github.com>
Date: Mon, 28 Sep 2026 14:26:56 +0200
Subject: [PATCH] fix(monitor): prevent narrow-screen report overflow

---
 AppImage/components/audit-report.tsx     | 4 ++--
 AppImage/components/security.tsx         | 3 +++
 AppImage/components/storage-overview.tsx | 5 +++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/AppImage/components/audit-report.tsx b/AppImage/components/audit-report.tsx
index 671b9f5a..b6548e4a 100644
--- a/AppImage/components/audit-report.tsx
+++ b/AppImage/components/audit-report.tsx
@@ -669,7 +669,7 @@ export function AuditReport() {
                 type="button"
                 onClick={() => toggle(f.check_id)}
                 aria-expanded={open}
-                className="w-full text-left p-4 flex items-start gap-3 rounded-lg hover:bg-white/5 transition-colors cursor-pointer"
+                className="w-full text-left p-4 flex max-[359px]:flex-wrap items-start gap-3 rounded-lg hover:bg-white/5 transition-colors cursor-pointer"
               >
                 {open
                   ? <ChevronDown className="h-4 w-4 mt-1 shrink-0 text-muted-foreground" />
@@ -678,7 +678,7 @@ export function AuditReport() {
                   <Icon className="h-3.5 w-3.5" />
                   {t(`audit.classifications.${shown}`)}
                 </Badge>
-                <div className="min-w-0 flex-1">
+                <div className="min-w-0 flex-1 max-[359px]:basis-full">
                   <div className="flex flex-wrap items-center gap-2">
                     <span className="font-medium text-foreground">
                       {t(`audit.checks.${f.check_id}.title`)}
diff --git a/AppImage/components/security.tsx b/AppImage/components/security.tsx
index 4f688301..5b3d3296 100644
--- a/AppImage/components/security.tsx
+++ b/AppImage/components/security.tsx
@@ -1413,6 +1413,9 @@ export function Security() {
   .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
   .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
   .grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
+  @media screen and (max-width: 639px) {
+    .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  }
   .card { padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; }
   .card-label { font-size: 10px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
   .card-value { font-size: 13px; font-weight: 600; color: #0f172a; }
diff --git a/AppImage/components/storage-overview.tsx b/AppImage/components/storage-overview.tsx
index 2a4fa823..2d687e97 100644
--- a/AppImage/components/storage-overview.tsx
+++ b/AppImage/components/storage-overview.tsx
@@ -3095,8 +3095,6 @@ function openSmartReport(disk: DiskInfo, testStatus: SmartTestStatus, smartAttri
   }
   @media screen and (max-width: 640px) {
     body { padding: 16px; padding-top: 64px; }
-    .grid-4 { grid-template-columns: 1fr 1fr; }
-    .grid-3 { grid-template-columns: 1fr 1fr; }
     .rpt-header { flex-direction: column; gap: 12px; align-items: flex-start; }
     .rpt-header-right { text-align: left; }
     .exec-box { flex-wrap: wrap; }
@@ -3200,6 +3198,9 @@ function openSmartReport(disk: DiskInfo, testStatus: SmartTestStatus, smartAttri
   .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
   .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
   .grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
+  @media screen and (max-width: 640px) {
+    .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  }
   .card { padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; }
   .card-label { font-size: 10px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
   .card-value { font-size: 13px; font-weight: 600; color: #0f172a; }