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>
This commit is contained in:
Joseph Doherty
2026-05-17 01:16:56 -04:00
parent 3397e99783
commit 271bf7edff
3 changed files with 11 additions and 4 deletions
@@ -19,12 +19,12 @@ else
</div> </div>
<section class="metric-grid"> <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="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="Attributes" Value="@DashboardDisplay.Count(Snapshot.Galaxy.AttributeCount)" Detail="dynamic, deployed" />
<MetricCard Label="Historized" Value="@DashboardDisplay.Count(Snapshot.Galaxy.HistorizedAttributeCount)" /> <MetricCard Label="Historized" Value="@DashboardDisplay.Count(Snapshot.Galaxy.HistorizedAttributeCount)" />
<MetricCard Label="Alarms" Value="@DashboardDisplay.Count(Snapshot.Galaxy.AlarmAttributeCount)" /> <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> </section>
@if (Snapshot.Galaxy.Status == DashboardGalaxyStatus.Unknown) @if (Snapshot.Galaxy.Status == DashboardGalaxyStatus.Unknown)
@@ -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="card-body">
<div class="metric-label">@Label</div> <div class="metric-label">@Label</div>
<div class="metric-value">@Value</div> <div class="metric-value">@Value</div>
@@ -18,4 +18,8 @@
[Parameter] [Parameter]
public string? Detail { get; set; } 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; }
} }
@@ -88,6 +88,8 @@ body.dashboard-body { min-height: 100vh; }
letter-spacing: 0.07em; letter-spacing: 0.07em;
color: var(--ink-faint); color: var(--ink-faint);
} }
.metric-card-wide { grid-column: span 2; }
.metric-value { .metric-value {
margin-top: 0.25rem; margin-top: 0.25rem;
font-family: var(--mono); font-family: var(--mono);
@@ -96,7 +98,8 @@ body.dashboard-body { min-height: 100vh; }
font-weight: 600; font-weight: 600;
line-height: 1.1; line-height: 1.1;
color: var(--ink); color: var(--ink);
overflow-wrap: anywhere; /* break-word, not anywhere: keep date/number tokens whole, wrap at spaces. */
overflow-wrap: break-word;
} }
.metric-detail { .metric-detail {
margin-top: 0.15rem; margin-top: 0.15rem;