From 271bf7edff0b1c5fd5e1da58d124f3cd3c3facda Mon Sep 17 00:00:00 2001
From: Joseph Doherty <dohejw01@gmail.com>
Date: Sun, 17 May 2026 01:16:56 -0400
Subject: [PATCH] Give Galaxy timestamp cards double-width boxes

The Last Deploy and Last Refresh metric cards hold full timestamps that
wrapped to three or four lines in a single-width card. Add a Wide option
to MetricCard (grid-column: span 2) and set it on both Galaxy timestamp
cards. Also switch .metric-value to overflow-wrap: break-word so a date
token is never split mid-value.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../Dashboard/Components/Pages/GalaxyPage.razor             | 4 ++--
 .../Dashboard/Components/Shared/MetricCard.razor            | 6 +++++-
 src/MxGateway.Server/wwwroot/css/dashboard.css              | 5 ++++-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/MxGateway.Server/Dashboard/Components/Pages/GalaxyPage.razor b/src/MxGateway.Server/Dashboard/Components/Pages/GalaxyPage.razor
index b9f64fd..729a1b4 100644
--- a/src/MxGateway.Server/Dashboard/Components/Pages/GalaxyPage.razor
+++ b/src/MxGateway.Server/Dashboard/Components/Pages/GalaxyPage.razor
@@ -19,12 +19,12 @@ else
     </div>
 
     <section class="metric-grid">
-        <MetricCard Label="Last Deploy" Value="@DashboardDisplay.DateTime(Snapshot.Galaxy.LastDeployTime)" Detail="@DeployAge()" />
+        <MetricCard Label="Last Deploy" Value="@DashboardDisplay.DateTime(Snapshot.Galaxy.LastDeployTime)" Detail="@DeployAge()" Wide="true" />
         <MetricCard Label="Objects" Value="@DashboardDisplay.Count(Snapshot.Galaxy.ObjectCount)" Detail="@($"{Snapshot.Galaxy.AreaCount:N0} areas")" />
         <MetricCard Label="Attributes" Value="@DashboardDisplay.Count(Snapshot.Galaxy.AttributeCount)" Detail="dynamic, deployed" />
         <MetricCard Label="Historized" Value="@DashboardDisplay.Count(Snapshot.Galaxy.HistorizedAttributeCount)" />
         <MetricCard Label="Alarms" Value="@DashboardDisplay.Count(Snapshot.Galaxy.AlarmAttributeCount)" />
-        <MetricCard Label="Last Refresh" Value="@DashboardDisplay.DateTime(Snapshot.Galaxy.LastSuccessAt)" Detail="@LastAttemptDetail()" />
+        <MetricCard Label="Last Refresh" Value="@DashboardDisplay.DateTime(Snapshot.Galaxy.LastSuccessAt)" Detail="@LastAttemptDetail()" Wide="true" />
     </section>
 
     @if (Snapshot.Galaxy.Status == DashboardGalaxyStatus.Unknown)
diff --git a/src/MxGateway.Server/Dashboard/Components/Shared/MetricCard.razor b/src/MxGateway.Server/Dashboard/Components/Shared/MetricCard.razor
index 78264b3..f3069b5 100644
--- a/src/MxGateway.Server/Dashboard/Components/Shared/MetricCard.razor
+++ b/src/MxGateway.Server/Dashboard/Components/Shared/MetricCard.razor
@@ -1,4 +1,4 @@
-<div class="card metric-card h-100">
+<div class="card metric-card h-100@(Wide ? " metric-card-wide" : string.Empty)">
     <div class="card-body">
         <div class="metric-label">@Label</div>
         <div class="metric-value">@Value</div>
@@ -18,4 +18,8 @@
 
     [Parameter]
     public string? Detail { get; set; }
+
+    /// <summary>Spans the card across two grid columns for long values such as timestamps.</summary>
+    [Parameter]
+    public bool Wide { get; set; }
 }
diff --git a/src/MxGateway.Server/wwwroot/css/dashboard.css b/src/MxGateway.Server/wwwroot/css/dashboard.css
index 5dc79d3..9ab69cd 100644
--- a/src/MxGateway.Server/wwwroot/css/dashboard.css
+++ b/src/MxGateway.Server/wwwroot/css/dashboard.css
@@ -88,6 +88,8 @@ body.dashboard-body { min-height: 100vh; }
   letter-spacing: 0.07em;
   color: var(--ink-faint);
 }
+.metric-card-wide { grid-column: span 2; }
+
 .metric-value {
   margin-top: 0.25rem;
   font-family: var(--mono);
@@ -96,7 +98,8 @@ body.dashboard-body { min-height: 100vh; }
   font-weight: 600;
   line-height: 1.1;
   color: var(--ink);
-  overflow-wrap: anywhere;
+  /* break-word, not anywhere: keep date/number tokens whole, wrap at spaces. */
+  overflow-wrap: break-word;
 }
 .metric-detail {
   margin-top: 0.15rem;