Improve dashboard bar-chart visuals: bars misaligned with labels + excess empty space

## Summary

The Cloud Analytics Dashboard charts read well conceptually, but the bar charts have two visual problems:

1. **Bars don't line up with their x-axis labels.**
2. **Too much empty space** in each bar chart's plot area.

Both come from the same root cause in how the data is shaped for Recharts, plus missing bar-sizing props.

## Affected charts

- **Data Freshness (log scale)** — `FreshnessChart` → `TierMsBarChart` ([cloud-dashboard/src/app/page.tsx:181-192](cloud-dashboard/src/app/page.tsx#L181-L192), [:44-95](cloud-dashboard/src/app/page.tsx#L44-L95))
- **Query Latency (log scale)** — `LatencyChart` → `TierMsBarChart` ([cloud-dashboard/src/app/page.tsx:101-112](cloud-dashboard/src/app/page.tsx#L101-L112))
- **Time Since Last Message — Per Node** — `NodeAgeChart` ([cloud-dashboard/src/app/page.tsx:247-293](cloud-dashboard/src/app/page.tsx#L247-L293))

## Root cause

### 1. Diagonal-matrix data shape → misalignment + empty bands

`TierMsBarChart` builds a 3-row dataset where each category row fills only ONE of three series and leaves the other two `null` ([page.tsx:50-54](cloud-dashboard/src/app/page.tsx#L50-L54)):

```js
{ tier: "RisingWave", rw: logVal(rw), tsdb: null, athena: null },
{ tier: "TimescaleDB", rw: null, tsdb: logVal(tsdb), athena: null },
{ tier: "Athena/S3", rw: null, tsdb: null, athena: logVal(athena) },
```

It then renders three grouped `` series ([page.tsx:83-85](cloud-dashboard/src/app/page.tsx#L83-L85)). Recharts reserves a grouped slot for all three series inside every category band, but only one bar is actually drawn per band — so each bar sits offset to one side of its tick label (not centered) and ~2/3 of every band is blank. This single-series-per-category shape is the direct cause of both the misalignment and the empty space.

The same grouped-but-sparse effect hits `NodeAgeChart` wherever `rw_age` is `null` (see the separate sparsity issue below).

### 2. No bar-sizing constraints

No `barSize` / `maxBarSize` / `barGap` / `barCategoryGap` is set on any chart, so Recharts uses its defaults and the bars end up thin relative to the wide `ResponsiveContainer` (`width="100%" height={220}`, [page.tsx:71](cloud-dashboard/src/app/page.tsx#L71), [:231](cloud-dashboard/src/app/page.tsx#L231), [:280](cloud-dashboard/src/app/page.tsx#L280)).

## Suggested fixes

- For the tier charts (Freshness, Latency): collapse to a **single series over one categorical axis** (one ``, one value per tier, colored per-tier via ``) instead of the diagonal null-matrix of three series. This centers each bar under its label and removes the empty slots.
- Set a sensible `maxBarSize` (and/or `barCategoryGap`) so bars fill the plot area proportionally rather than leaving large gaps.
- Consider a shorter `height` or constrained max-width on `.card` ([cloud-dashboard/src/app/globals.css:5-6](cloud-dashboard/src/app/globals.css#L5-L6)) if charts still feel sparse after the above.

## Acceptance check

- Every bar is horizontally centered under its x-axis tick label.
- No empty reserved slots between/around bars in the tier charts.
- `mkdocs build --strict` and the cloud-dashboard build still pass.

## Note

The **content is good** — this is a purely visual/layout improvement, no metric or query changes intended here.

Start in cloud-dashboard/src/app/page.tsx at TierMsBarChart, FreshnessChart, LatencyChart, and NodeAgeChart, then inspect cloud-dashboard/src/app/globals.css if the charts remain sparse. Run the cloud-dashboard build and mkdocs build --strict before and after; done means centered bars, no empty tier slots, and both builds passing.

Written by the indexing model from the issue text.