ottyl/tickets/111-scrollable-panel-legend.md

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.