# 111 — Legend must scroll instead of overflowing the panel

## Summary

`PanelChart`'s recharts `<Legend>` (`webapp/src/components/
PanelChart.tsx:134`, `:190`) has no height constraint or scroll
container. A panel with many series (e.g. a high-cardinality PromQL
query, or the post-`squashRows` `MAX_KEPT_SERIES` = 7 kept rows plus
"Other") wraps the legend across as many lines as it needs, growing
the panel's rendered height and pushing surrounding dashboard layout
around rather than staying within the chart's fixed footprint.

## Where

- `webapp/src/components/PanelChart.tsx:117`, `:154`, `:176` — each
  chart type wraps its `<ResponsiveContainer>` at a fixed `height={220}`,
  but the `<Legend>` inside it (`:134`, `:190`) isn't given its own
  bounded, scrollable region — recharts lays it out in the space left
  after the plot area, which can push the container's effective
  rendered height past 220 when the legend wraps to multiple rows.
- `webapp/src/components/Dashboards.tsx:46-92` (`PanelPreview`) is the
  only caller of `PanelChart` today — worth checking that whatever
  fixed-height/scroll wrapper gets added here doesn't fight with
  `PanelPreview`'s own loading/error states (`:85-90`), which render
  outside `PanelChart` at a different fixed height (`h-48`).

## Direction

- recharts' `<Legend>` supports a `wrapperStyle` prop (already used
  for `fontSize`, `:134`/`:190`) — extending it with a fixed
  `maxHeight` and `overflowY: 'auto'` is the natural fix and avoids
  building a custom legend renderer just for this.
- Verify this doesn't conflict with the click-to-focus work in
  [[110-legend-click-to-focus-series]] — that ticket also touches the
  `<Legend>` props (`onClick`, `formatter`) on these same two call
  sites, so land whichever lands second by rebasing onto the other's
  `<Legend>` props rather than both independently restructuring it.
- Decide a concrete max height (e.g. two or three legend rows' worth)
  that keeps the panel's total footprint predictable in a dashboard
  grid; check `Dashboards.tsx`'s panel grid/card layout for whatever
  existing panel height convention should inform the number.

## Scope

- Line and pie charts only, matching where `<Legend>` already
  renders — same boundary as [[110-legend-click-to-focus-series]].
- Out of scope: virtualizing the legend list for very large series
  counts — `squashRows` (`PanelChart.tsx:50-57`) already caps bar/pie
  series at `MAX_KEPT_SERIES` (7) + "Other", and line charts have no
  equivalent cap today, but adding one is a separate concern from
  making the legend scrollable.