From e2ec5fccee1946952a6a7e742ee5e21048a6ba0c Mon Sep 17 00:00:00 2001
From: Juan Denis <jhd3197@gmail.com>
Date: Sat, 7 Nov 2026 16:23:25 -0500
Subject: [PATCH] feat(ui): full-width KPI labels on phone

On phones the KPI tile icon now sits inline with the value, so labels like 'Protected resources' and 'Memory usage' get the full tile width instead of being cut off, and the sub line stays on one line. Tablet and desktop are unchanged. Also routes the Backups 'across N destinations' text through i18n.
---
 .../components/backups/BackupsOverview.jsx    |  2 +-
 frontend/src/i18n/locales/en.json             |  2 ++
 .../src/styles/components/_design-system.scss | 30 +++++++++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/backups/BackupsOverview.jsx b/frontend/src/components/backups/BackupsOverview.jsx
index e169ae5a..92a36172 100644
--- a/frontend/src/components/backups/BackupsOverview.jsx
+++ b/frontend/src/components/backups/BackupsOverview.jsx
@@ -272,7 +272,7 @@ export default function BackupsOverview({
                     label={t('app.backupsOverview.storageUsed', 'Storage used')}
                 >
                     <div className="sk-kpi__sub">
-                        <span>across {destinations.count} destination{destinations.count === 1 ? '' : 's'}</span>
+                        <span>{t('app.backupsOverview.acrossDestinations', { count: destinations.count, defaultValue_one: 'across 1 destination', defaultValue_other: 'across {{count}} destinations' })}</span>
                     </div>
                 </MetricCard>
                 <MetricCard
diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index 5f3e4e66..e1db4217 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -757,6 +757,8 @@
             "yourServerDiskUsuallyFree": "Your server disk (usually free)"
         },
         "backupsOverview": {
+            "acrossDestinations_one": "across 1 destination",
+            "acrossDestinations_other": "across {{count}} destinations",
             "allSnapshots": "All backups",
             "backupActivity": "Backup activity",
             "backupCompleted": "Backup completed ·",
diff --git a/frontend/src/styles/components/_design-system.scss b/frontend/src/styles/components/_design-system.scss
index 47cc4cf6..caf1d9d0 100644
--- a/frontend/src/styles/components/_design-system.scss
+++ b/frontend/src/styles/components/_design-system.scss
@@ -233,6 +233,36 @@ $sk-tones: ('accent', 'green', 'cyan', 'amber', 'red', 'violet');
     // A tile whose metric is over its configured limit. Amber, not red: it is
     // an "act soon", and the value itself already carries the number.
     &.is-alerting { border-color: rgba(245, 185, 69, 0.35); }
+
+    // Phone (matches the 2-up KpiBand): the icon sits inline with the value and
+    // the body dissolves into the grid, so the label gets the full tile width
+    // (two-line clamp, no ellipsis) and the sub line collapses to one line.
+    @media (max-width: 560px) {
+        grid-template-areas: none;
+        row-gap: $space-hair;
+
+        // Row 1 is pinned (icon, value, trend); every other body child and the
+        // spark span the full width and auto-flow into their own rows below.
+        &__body { display: contents; }
+        &__icon, &__val, &__trend { grid-area: auto; grid-row: 1; }
+        &__icon { grid-column: 1; }
+        &__val { grid-column: 2; }
+        &__trend { grid-column: 3; }
+        &__body > :not(.sk-kpi__val), &__spark { grid-area: auto; grid-column: 1 / -1; min-width: 0; }
+        &__label {
+            white-space: normal;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            line-clamp: 2;
+        }
+        &__sub {
+            flex-wrap: nowrap;
+            white-space: nowrap;
+            overflow: hidden;
+            > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+        }
+    }
 }
 
 // ------------------------------------------------------------