[5968] fix(frontend): unclip wide y-axis labels on usage charts

[Kirtofu]

Closes #5968

Summary

The Usage card's Latency and Cost charts clip the leading digit of wide y-axis labels (20Kms renders as 0Kms, 15Kms as 5Kms), because CustomAreaChart offsets the entire plot area — Y axis included — 20px past the left edge of the SVG with a negative margin.

Root cause

web/oss/src/components/pages/observability/dashboard/CustomAreaChart.tsx:

<ReAreaChart data={data} margin={{top: 5, right: 5, left: -20, bottom: 0}}>

Recharts lays the Y axis inside the plot area, so left: -20 shifts it left of the SVG origin. Labels wider than ~4 characters then start at negative x and get clipped by the card's overflow boundary — exactly the negative x coordinates measured in the issue report (10Kms −5, 15Kms −5, 20Kms −8). The -20 is a leftover visual nudge from the commit that introduced the component (60c2b4c4) with no comment explaining it.

Fix

One line: left: -20 → left: 0. The chart keeps its layout otherwise unchanged; the widest label measured in the issue sits at x=−8, so removing the offset recovers all 20px with slack to spare.

Verification

I reproduced this component in a minimal React + recharts (2.15.4) harness — the same margin, tickCount, and valueFormatter (${formatCompactNumber(value)}ms) as the app — and measured each y-axis tick label's left edge relative to the chart container in a headless browser:

margin	0ms	5Kms	10Kms	15Kms	20Kms
left: -20 (before)	+10px	+3px	−3px	−3px	−3px
left: 0 (after)	+30px	+23px	+17px	+17px	+17px

Negative = outside the clipping boundary → leading digit cut off. After the fix every label is fully visible.

Demo

Before (labels clipped):

After (labels legible):

Testing

• The change is a single numeric value; no imports, components, or styles were added.
• I could not run pnpm lint-fix locally (no full monorepo checkout available in this environment) — CI lint should be unaffected, but flagging it per the contributor guide.
• Manual QA suggestion: open Home → Usage → Expand and confirm 20Kms/15Kms/10Kms render in full.

Checklist

• I have included a screenshot for this UI change
• Relevant tests pass locally — n/a for this change; minimal harness verification above
• Relevant linting and formatting pass locally — not runnable in this environment; flagging for CI
• PR title follows the [issue-id] fix(frontend): ... convention
• CLA — will sign when the bot prompts

[vercel]

@Kirtofu is attempting to deploy a commit to the agenta projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 4cd33c8f-444f-420d-86cc-3aa558af2672

📥 Commits

Reviewing files that changed from the base of the PR and between 0af145e and 60e573d.

📒 Files selected for processing (1)

• web/oss/src/components/pages/observability/dashboard/CustomAreaChart.tsx

---

📝 Walkthrough

Summary by CodeRabbit

• Bug Fixes
  • Improved observability dashboard chart layout by adjusting the left margin for better alignment and visibility.

Walkthrough

The area chart left margin changes from -20 pixels to 0 pixels to prevent y-axis labels from being clipped.

Changes

Chart layout

Layer / File(s)	Summary
Correct axis label positioning web/oss/src/components/pages/observability/dashboard/CustomAreaChart.tsx	ReAreaChart now uses a zero-pixel left margin instead of a negative 20-pixel margin.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Merge Risk: ⚪ Minimal · up to 60e57

This localized UI fix removes the chart offset that clips wide y-axis labels; no actionable merge-blocking risk remains after normal lint and layout checks.

Possibly related PRs

• Agenta-AI/agenta#5996: Makes the same CustomAreaChart.tsx margin change to address clipped y-axis labels.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the frontend fix for clipped wide y-axis labels and references issue #5968.
Description check	✅ Passed	The description directly explains the clipping cause, the one-line fix, and verification for the Usage charts.
Linked Issues check	✅ Passed	The change from left margin -20 to 0 directly addresses issue #5968 and prevents the reported y-axis labels from being clipped.
Out of Scope Changes check	✅ Passed	The pull request contains only the scoped one-line chart margin change required to fix the linked issue.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Copilot]

Pull request overview

Fixes a UI rendering issue in the Observability dashboard Usage charts where wide Y-axis tick labels were being clipped due to a negative left chart margin in the shared CustomAreaChart component.

Changes:

• Removes the negative left margin on the Recharts AreaChart to keep the Y-axis ticks inside the SVG drawable area.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.