[player-coachhelm][mobile] Putting make-rate chart: x-axis labels collide and y-axis labels clip off-screen

[njrini99-code]

Where

Player-facing golf surface, mobile (390px). The putting make-rate by distance line chart (green solid = you, grey dashed = PGA/reference; distance bands 0-3 / 3-5 / 5-10 / 10-15 / 15-25 / 25+ ft). Likely component: a putting make-rate line chart rendered in src/components/fairway/pages/coachhelm/FairwayStatsCockpit.tsx or the CoachHelm shot-analysis deep dive — confirm the exact chart at fix time (grep the "0-3 ft" band labels).

Evidence

IMG_4975. This is the "text isn't rendering for the chart" report.

The problem

1. X-axis category labels overlap/collide. They render as 0-3 ft 3-5 ft 5-10 f10-15 ft15-25 f25+ ft — adjacent labels run into each other because six ~6-char labels do not fit the 390px plot width at the current font size and there is no rotation / abbreviation / wrapping / interval strategy.
2. Y-axis tick labels are clipped at the left edge. Only a partial "0" is visible; the numbers are cut off by the chart's left margin / the page gutter. The plot has no left margin reserved for the axis, or the chart overflows its container to the left.
3. The plot overflows its container — the green line runs off the left edge, confirming the chart is wider than its box and is being clipped rather than fit-to-width.

How it should look (architecture)

• The chart must fit within its card on a 390px viewport: reserve an explicit left margin for y-axis labels, and never let the plot area exceed the card's content box (the card, not the chart, owns horizontal bounds; if anything scrolls, it's an inner overflow-x:auto container, never the page body).
• Six dense x labels on mobile need a real strategy: rotate ~-35°, OR abbreviate (0-3, 3-5, … dropping the repeated "ft" into the axis title), OR thin to every other tick with the rest on tap. Pick one and apply it responsively (full labels on desktop, condensed on mobile).
• Value callouts (61%, 35%, …) must not sit on top of gridlines/other labels.

Acceptance criteria

• At 390px, every x-axis label is fully readable with no character overlap between adjacent labels.
• Y-axis tick labels are fully visible (not clipped by the left edge).
• The chart's drawn area stays inside its card; page body does not scroll horizontally.
• Verified against prod with a real player (rinin376) via the headless capture harness at audit/product-audit/.

[coderabbitai]

🔗 Related PRs

#203 - fix(fairway): demo-day fixes — stats parity, signals/goals/stats bugs, build font [merged]
#213 - fix(round-review): momentum per-hole, SG caption consistency, rounded % [merged]
#801 - fix: app-tab Rule-8 sweep — roster/stats/pipeline/scorecard/qualifier become real phone layouts [merged]
#954 - Fix train: overnight QA issues #943-#950 + #952 (7 lanes, validated as one tree) [merged]
#967 - Redesign: player CoachHelm — fix overlaps, de-jargon, collapse hollow panels [open]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[njrini99-code]

Clarification (Nick) — this is a comprehension failure, not just crowding

The distance-band labels below the chart (0-3, 3-5, 5-10, 10-15, 15-25, 25+) overlap so badly they render as mush (5-10 f10-15 ft15-25 f). The real damage isn't that it looks crowded — it's that you cannot tell which make-% belongs to which distance band. The value callouts (61%, 35%, 15%, 13%, 2%) are meaningless without a legible x-axis under them, so the entire chart fails to communicate.

Add to acceptance criteria:

• A viewer can unambiguously map every plotted value to its distance band at 390px — each band label is fully legible and clearly sits under its own data point (no run-together labels, no ambiguity about which % is which distance).
• If two label sets render the bands (e.g. an axis AND a separate breakdown/legend row), BOTH must be legible and non-overlapping — check the full component for a second occurrence of these band labels, not just the chart axis.

Treat "can I tell what's what?" as the pass/fail bar, not "does it fit."

[njrini99-code]

PRIMARY symptom (correcting the framing)

The #1 bug is simpler and more severe than "can't map value to band": the x-axis band labels are physically overlapping each other and are literally illegible. Adjacent labels are drawn on top of one another with zero gap, so the characters collide into an unreadable smear — e.g. 5-10 ft runs straight into 10-15 ft into 15-25 ft, rendering as 5-10 f10-15 ft15-25 f. You cannot read the text at all.

Root cause is almost certainly: too many long tick labels for the available width with no spacing/rotation/interval handling, so the label elements render at overlapping x-positions. (The value→band comprehension failure is just the downstream consequence of the text being unreadable.)

Fix bar: every band label is fully legible with clear whitespace between it and its neighbors at 390px — no character of any label touching or overlapping any character of an adjacent label.

[njrini99-code]

Fixed and shipped to production in #975 (main @ cd2e61d). Verified rendering via pre-deploy review.