fix(monitor): prevent narrow-screen report overflow

This commit is contained in:
martino
2026-09-28 14:26:58 +02:00
parent 8aade0e55c
commit fa48be17d1
3 changed files with 8 additions and 4 deletions
+2 -2
View File
@@ -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`)}
+3
View File
@@ -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; }
+3 -2
View File
@@ -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; }