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 14, 2026 5:44am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 14, 2026 5:44am
npmx-lunaria	Ignored		Mar 14, 2026 5:44am

[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

This PR updates the TrendsChart component to use a responsive, dynamic chartHeight (accounting for mobile vs modal and correction controls), adds resize guards (isResizing, pauseChartTransitions, timeout debounce and cleanup on unmount) to suppress SVG transitions during resizing, replaces static height usage in chart configuration, refactors the data-correction UI into an animated, height-controlled container, and applies a no-transition class and related logic to chart primitives, minimap and print interactions while resizing.

Possibly related PRs

• fix: stabilise modal chart render after transition #1034: Addresses chart rendering stability during UI transitions by deferring chart mounting until a modal transition completes — closely related to resize/transition guarding.
• fix: increase chart right padding #1620: Modifies chart configuration (right padding) in the same app/components/Package/TrendsChart.vue, touching the chart layout logic.
• fix: address CLS in downloads modal #1619: Alters container height and responsiveness in app/components/Package/TrendsChart.vue, overlapping with this PR's height and responsiveness changes.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly explains the issue (CLS caused by data correction section) and describes the implemented fixes (dynamic chart height and paused transitions), with visual before/after comparisons.

_{✏️ 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

📝 Coding Plan

• Generate coding plan for human review comments

---

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.}

Tip

CodeRabbit can use Trivy to scan for security misconfigurations and secrets in Infrastructure as Code files.

Add a .trivyignore file to your project to customize which findings Trivy reports.

[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

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

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

1698-1844: ⚠️ Potential issue | 🟠 Major

Make the correction panel a proper disclosure.

Line 1711 only hides the panel visually, so the sliders on Lines 1726, 1741 and 1756 plus the checkbox on Line 1828 stay tabbable when the section is “closed”. The toggle on Line 1698 also does not expose its expanded state.

♿ Suggested fix

         <button
           type="button"
+          :aria-expanded="showCorrectionControls"
+          aria-controls="trend-correction-controls"
           class="self-start flex items-center gap-1 text-2xs font-mono text-fg-subtle hover:text-fg transition-colors"
           `@click`="showCorrectionControls = !showCorrectionControls"
         >
@@
         <div
+          id="trend-correction-controls"
+          :aria-hidden="!showCorrectionControls"
+          :inert="!showCorrectionControls || undefined"
           class="overflow-hidden transition-[opacity] duration-200 ease-out"
           :class="
             showCorrectionControls
               ? 'max-h-[220px] opacity-100'
               : 'max-h-0 opacity-0 pointer-events-none'
           "
         >

🧹 Nitpick comments (1)

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

1351-1356: Unify the chart-height maths in one place.

chartHeight now uses 950 / 600 / 494, while the wrapper on Lines 1861-1867 uses a separate 567 / 491 branch. Those values will drift over time and make this CLS fix brittle, because the outer container and VueUiXy sizing can diverge silently.

Also applies to: 1861-1867

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 63f7d82a-30ad-4bb3-a3ba-65fb3d163667

📥 Commits

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

📒 Files selected for processing (1)

• app/components/Package/TrendsChart.vue

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

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

2170-2173: Scope .no-transition styles to this component root

The selector is currently global and generic. Scoping it to #trends-chart keeps the transition guard local and avoids unintended styling collisions with other components using the same class name.

Proposed refactor

-.no-transition line,
-.no-transition circle {
+#trends-chart .no-transition line,
+#trends-chart .no-transition circle {
   transition: none !important;
 }

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3f9108c3-aaba-4626-adf5-6ca247467e32

📥 Commits

Reviewing files that changed from the base of the PR and between aaa02a0 and 31ce284.

📒 Files selected for processing (1)

• app/components/Package/TrendsChart.vue