cockroachdb / cockroachdb/cockroach
ui: Metrics page Summary panel clipped on narrow viewports (≤1350px) due to hardcoded chart width
- Dominant language
- Go
- Stars
- 32.5k
- Forks
- 4.1k
- PR merge metrics
- PR metrics pending
Description
**Describe the problem**
On the DB Console Metrics page (`/#/metrics/...`), the right-hand **Summary**
panel (Total Nodes, Capacity Usage, Queries per second, P99 latency, etc.)
has its values visually clipped at the right edge whenever the viewport is
narrower than ~1350 px. Labels remain visible but numbers/units are cut off,
and **no horizontal scrollbar appears** to let the user scroll to see them —
the content is just gone.
This is a real, recurring problem for users on older Macs at default Retina
scaling — e.g. a 13" 2016 MacBook Pro renders the browser viewport at
≈1280 px, which falls below the threshold. The same console on a 13" 2023
MacBook Pro (~1440 px viewport at default scaling) renders fine.
**To Reproduce**
1. Open any CockroachDB cluster's DB Console (any recent build).
2. Open DevTools → device emulation → set viewport width to **1280 × 800**
(mimics a 13" 2016 MBP at default Retina scaling). Or just narrow your
browser window until it's ≤ ~1350 px wide.
3. Navigate to **Metrics → Overview** (or any Metrics dashboard).
4. Observe the right-hand Summary panel: labels are visible but the value
column is clipped at the viewport edge.
5. Resize wider than ~1380 px → truncation disappears.
**Confirmation in DevTools:**
- Every `.visualization` div renders at width **947 px** regardless of viewport.
- The uPlot `` inside has `width=\"947\"`.
- `document.querySelector('.l-columns').scrollWidth` exceeds
`document.querySelector('.l-columns').clientWidth` on a narrow viewport.
**Expected behavior**
Charts and the Summary sidebar should both remain fully visible at any
reasonable viewport width (≥ ~1024 px). Either the charts should resize
down with the viewport, or the layout should reflow (e.g., Summary stacks
below charts) on narrow screens.
**Root cause analysis**
- [`pkg/ui/workspaces/db-console/src/views/cluster/util/graphs.ts:227`](https://github.com/cockroachdb/cockroach/blob/master/pkg/ui/workspaces/db-console/src/views/cluster/util/graphs.ts#L227)
— uPlot config hardcodes `width: 947, height: 300`.
- [`pkg/ui/workspaces/cluster-ui/src/graphs/bargraph/bars.ts:150`](https://github.com/cockroachdb/cockroach/blob/master/pkg/ui/workspaces/cluster-ui/src/graphs/bargraph/bars.ts#L150)
— same hardcoded 947.
- [`pkg/ui/workspaces/cluster-ui/src/graphs/visualization/visualizations.module.scss:9`](https://github.com/cockroachdb/cockroach/blob/master/pkg/ui/workspaces/cluster-ui/src/graphs/visualization/visualizations.module.scss#L9)
— `.visualization { width: fit-content; }`, so the chart card sizes to
the chart inside.
- No `ResizeObserver` or `uPlot.setSize()` anywhere in the LineGraph
component — charts are locked at 947 px from creation, no matter what
the parent gives them.
- [`pkg/ui/workspaces/db-console/src/views/app/containers/layout/layoutPanel.scss:21`](https://github.com/cockroachdb/cockroach/blob/master/pkg/ui/workspaces/db-console/src/views/app/containers/layout/layoutPanel.scss#L21)
— `.layout-panel { overflow: hidden; }`, which is why no horizontal
scrollbar appears and clipped content is just lost.
**Layout math:**
```
nav 80 + chart 947 + summary ~280 + flex/padding ~30 ≈ 1340 px
```
- 1280 px viewport → ~60 px of right-side content clipped.
- 1440 px viewport → comfortable fit.
**Possible fixes**
1. **Best:** drive `width` from a `ResizeObserver` on the chart container
and call `uPlot.setSize()` on resize; also drop `width: fit-content`
from `.visualization` so it spans its flex slot. Needs care around the
existing `preCalcGraphSize` flag and the uPlot recreate path at
[`linegraph/index.tsx:343-357`](https://github.com/cockroachdb/cockroach/blob/master/pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/index.tsx#L343-L357).
2. **Quick stopgap:** reduce the constant 947 → ~700 px. Charts shrink on
every viewport but the bug goes away on common laptop sizes.
3. **Layout-only:** add `@media (max-width: 1350px) { .l-columns
{ flex-direction: column } }` so Summary stacks below charts on narrow
screens.
**Environment:**
- CockroachDB version: v26.2.0
- Browser: Chrome (latest, on macOS)
- Reproduced on: 3-node, 2 vCPU cluster, opened from a 13\" 2016 MacBook Pro
- Not reproduced on: 13\" 2023 MacBook Pro (viewport too wide to trigger)
**Additional context**
Originally surfaced as an unrelated-looking font 404 (`Lato-Regular.woff2`
with OTS parse error) in the DevTools console. That turned out to be a red
herring — the server serves `/Lato-Regular.woff2` correctly (HTTP 200,
`content-type: font/woff2`, 55,459 bytes). The font message is not the
cause of the truncation.
Jira issue: CRDB-64261
Contributor guide
Assessment
This issue has not been assessed yet.