fix: handle CLS issues in chart modal

[graphieros]

The introduction of the data correction section in the chart modal leads to CLS when toggling the menu.
The fix consists in:

• adapting the height of the chart depending on the open state of the data correction menu
• pausing chart element transitions to avoid triggering them when the chart is resized.

BEFORE:

Enregistrement.de.l.ecran.2026-03-11.a.07.34.48.mov

AFTER:

Enregistrement.de.l.ecran.2026-03-11.a.07.31.29.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 11, 2026 6:36am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored		Mar 11, 2026 6:36am
npmx-lunaria	Ignored		Mar 11, 2026 6:36am

[codecov]

Codecov Report

❌ Patch coverage is 87.17949% with 5 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Package/TrendsChart.vue	87.17%	3 Missing and 2 partials ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

The pull request modifies the TrendsChart component to introduce responsive chart sizing and chart interaction guards during resize events. Changes include dynamic chart height calculation based on mobile and modal states, debounced pausing of chart transitions during resize operations with cleanup on unmount, and refactoring of the data-correction UI using transition-enabled containers with animated expand/collapse functionality. Static height references in the chart configuration are replaced with dynamic values, and CSS rules are added to disable transitions on SVG elements during resizing to prevent visual flickering.

Possibly related PRs

• fix: increase chart right padding #1620: Modifies TrendsChart.vue chart layout configuration with adjustments to right padding alongside the main PR's dynamic height and resizing logic.
• fix: address CLS in downloads modal #1619: Updates TrendsChart.vue container height and responsiveness handling, directly overlapping with this PR's dynamic chartHeight and resize guard implementations.

Suggested reviewers

• danielroe
• 43081j

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, explaining the CLS issue in the chart modal and detailing the fix with specific implementation strategies.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch chart-improvements

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

app/components/Package/TrendsChart.vue (1)

1719-1726: Consider adding height to the transition for smoother expansion.

Currently, only opacity is transitioned (transition-[opacity]), so the container height snaps instantly from max-h-0 to max-h-[220px]. If you want a smoother expand/collapse animation, you could transition both properties:

-          class="overflow-hidden transition-[opacity] duration-200 ease-out"
+          class="overflow-hidden transition-[max-height,opacity] duration-200 ease-out"

If the instant height change is intentional to minimise perceived CLS, this is fine as-is.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 906e8b30-3531-4b15-abc5-49dfb0829107

📥 Commits

Reviewing files that changed from the base of the PR and between 3712560 and 6e5af51.

📒 Files selected for processing (1)

• app/components/Package/TrendsChart.vue