From 9cbc2cc274e719e03d592001eee002c880a7a7c0 Mon Sep 17 00:00:00 2001
From: rob thijssen <grenade@rob.tn>
Date: Tue, 8 Sep 2026 14:59:26 +0300
Subject: [PATCH] ui: put the miner count before the height tile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Height is the one tile with no sparkline — it only goes up, and a straight
diagonal reports nothing — so it sat in the middle of the row with an empty
slot under it, splitting the four lines into two and two. Last, it stops
interrupting them.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jp6a8EDar9ueEhAxzep4V5
---
 web/src/components/StatBar.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/src/components/StatBar.tsx b/web/src/components/StatBar.tsx
index f0ad803..d87f97f 100644
--- a/web/src/components/StatBar.tsx
+++ b/web/src/components/StatBar.tsx
@@ -8,7 +8,9 @@
  *
  * Under four of them sits the same value's recent history, because a number on
  * its own cannot say whether it is high. Height gets none: it only ever goes
- * up, and a straight diagonal is a line with nothing to report.
+ * up, and a straight diagonal is a line with nothing to report — which is why
+ * it sits last, so the four sparklines run uninterrupted rather than being
+ * split by a tile with an empty slot.
  *
  * The series is fetched rather than pushed, and refetched only when the chain
  * crosses a bucket boundary — the one moment a point can change. Everything
@@ -198,7 +200,7 @@ export function StatBar({
   if (!summary) {
     return (
       <div className="stats">
-        {['Network hashrate', 'Difficulty', 'Block time', 'Height', 'Miners'].map((label) => (
+        {['Network hashrate', 'Difficulty', 'Block time', 'Miners', 'Height'].map((label) => (
           <Stat key={label} label={label} value="—" />
         ))}
       </div>
@@ -230,7 +232,6 @@ export function StatBar({
         note={`target ${seconds(summary.target_block_time_seconds)}`}
         points={trends?.interval ?? null}
       />
-      <Stat label="Height" value={height(summary.height)} note="best block seen" />
       <TrendStat
         label="Miners"
         value={String(summary.distinct_miners)}
@@ -241,6 +242,7 @@ export function StatBar({
         }
         points={trends?.miners ?? null}
       />
+      <Stat label="Height" value={height(summary.height)} note="best block seen" />
     </div>
   )
 }