Make dashboard cards uniform and symmetric; stop clipping update text

The four welcome cards varied in shape and typography: the grid
produced a 3+1 orphan layout at wide widths, sub text was
single-line ellipsized (the updates card ended mid-sentence with
"…"), the Network card's values used a different size than the
other cards' sub text, and only the clickable cards carried a
chevron circle.

- Grid is now a symmetric 2×2 at wide widths (equal-height rows);
  the three-card Desktop-only role renders one balanced row
- Card sub text wraps instead of being cut off — "Sovran_SystemsOS
  keeps itself current" is fully visible at every width
- One type scale across all cards: 0.9rem titles, 0.8rem sub text
  (Network values aligned to it), 46px chips, uniform min-height
- Chevron circles removed from the cards — hover/focus lift is the
  click affordance, and every card has the same shape
- The updates card now reflects the real update state (failed,
  restart required, running) instead of only "updates available";
  it can no longer claim up-to-date while a restart is pending
This commit is contained in:
2026-09-08 20:08:52 -05:00
parent bbf53d089a
commit 4c22c2363b
2 changed files with 33 additions and 31 deletions
+15 -22
View File
@@ -358,11 +358,19 @@
.welcome-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 1fr; /* both rows share the taller height → uniform cards */
gap: 16px;
margin-top: 34px;
}
/* Three cards (Desktop-only role, no Bitcoin card) → one symmetric row */
@media (min-width: 681px) {
.welcome-cards:not(:has(#w-btc)) {
grid-template-columns: repeat(3, 1fr);
}
}
/* wrappers whose children become grid items */
.welcome-dyn { display: contents; }
@@ -384,7 +392,7 @@
}
.w-network .ip-value {
font-size: 0.82rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--text);
}
@@ -408,9 +416,11 @@
position: relative;
overflow: hidden;
min-width: 0;
min-height: 88px; /* uniform card height everywhere */
}
.widget:hover { border-color: var(--border-strong); }
.widget.clickable:hover { transform: translateY(-1px); }
.widget.clickable { cursor: pointer; }
.widget.clickable:focus-visible {
@@ -465,11 +475,10 @@
.widget .sub {
margin-top: 4px;
font-size: 0.78rem;
font-size: 0.8rem;
line-height: 1.45;
color: var(--text-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: anywhere;
}
.widget .sub b { color: var(--text); font-weight: 650; }
@@ -491,22 +500,6 @@
transition: width 0.6s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.w-chev {
margin-left: auto;
width: 30px;
height: 30px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--text-3);
flex-shrink: 0;
}
.w-chev svg { width: 15px; height: 15px; }
.widget.clickable:hover .w-chev {
color: var(--text-2);
background: rgba(255, 255, 255, 0.07);
}
/* ── Tiles area ─────────────────────────────────────────────────── */