Now: changeRange clears the settlements (correctly), which swaps five list rows for an .empty-state with min-height 220px and swaps the chart for a shorter .empty-chart. Everything below the list moves up, then back down when the response lands.

Change to: keep the clear and hold the height. Set .empty-state to min-height: 484px, and inside the existing @media (max-width: 43rem) block add .empty-state { min-height: 745px; } and .empty-chart { min-height: 322px; }. These are the measured differences added to the current 220px and 280px.

Why: the bar for states is that none moves unrelated content, and the brief asks for one switch where totals, chart and list change together, not a page that collapses on every tap.

Now: the header links scroll correctly, but opening a URL with a hash leaves the page at scrollY 0, because React renders the target only after the browser has tried the fragment. The new #mining and #health anchors are therefore not shareable.

Change to: in useDashboard's load(), directly before "initial = false;", add: if (initial && window.location.hash) document.getElementById(window.location.hash.slice(1))?.scrollIntoView(); This runs after the first data has set the final layout.

Why: README.md line 34 says "Direct links and browser Back/Forward work; unrelated query parameters and anchors survive." The hash survives in the URL, but the link does not take the visitor to the panel.

Now: the large value under "Buffered rounds" is the round id, 334, with "1 round · 0 work units" in small text below it. Beside it, "Queued closed rounds" uses the same style for a true count (1), so the two look like the same kind of number.

Change to: keep the label and render the id as an id: when first and last match, "Round 334"; otherwise "Rounds 334–335", wrapping the roundRange call on this line. Leave the "None queued" branch as it is.

Why: the brief asks this panel to show queued/projected rounds, and a visitor checking queue health must be able to read how many are waiting. Here the headline figure overstates it by 334 times.

Now: the small lines format missing values into sentences, so the panel says "Loading" above "Unavailable queued work units" on every first load, before the app knows anything. It also produces "Unavailable rounds · Unavailable work units", "Unavailable additional completed blocks" and "Open-round work: Loading units. Latest oracle closure: round Unavailable."

Change to: render each subtext only when its value exists: {h?.queuedWork != null && …} here, and the same guard on the buffered line (155-158), the projected-blocks line (177), and the .health-detail sentence (182-186). The large value already says Loading or Unavailable, so nothing is lost, and the row closes up by the removed line.

Why: this is one of the three panels the brief asked for, and each state must say only what the app knows.

Now: the API's 7d window ends on a future boundary, and every bucket is drawn and tabled, so the newest slot is a 2px zero stub under the subhead "over the last 7 days". It reads as settlements having stopped.

Change to: const buckets = (data?.buckets ?? []).filter((b) => !data?.generatedAt || Date.parse(b.start) <= Date.parse(data.generatedAt)); The remaining bars widen to fill the plot.

Why: the brief asks for a chart of the selected window, and a period that has not started has no value to show.

Now: at 7d the disclosure reads "View period values", the table caption "Settlements and work units by 6 hours (UTC)", and the chart's label "Settlements by 6 hours in UTC."

Change to: intervalLabel becomes hourly ? 'hourly' : ${formatNumber((data?.bucketSeconds ?? 0) / 3600, 0)}-hour, so the summary reads "View 6-hour values". Change "by {period}" to "per {period}" at lines 111 and 172, matching the legend's "Settlements per 6 hours".

Why: dashboard labels name the thing in plain words, and the legend on the same chart already does.

Now: the decorative icon wraps below the heading and subhead and sits alone on a row above "Total minted". Chain health, its neighbour, has no such icon.

Change to: delete this line. "Total minted" moves up into the space, and the heading matches Chain health at every width.

Why: the icon carries no information, and at phone width it opens a hole in the panel's most important reading.

Now: "Chain health updated ..." starts 0px under the last freshness timestamp, and "Mining round updated ..." starts 0px under the projection line, so the note reads as part of the block above. The mining supply note has 20px.

Change to: add .next-round > .source-note, .health-panel > .source-note { margin-block-start: 12px; } to src/styles.css beside the other chain-panel rules.

Why: the same component already has clear space in the same panel, so this reuses the site's own spacing.