[Bug]: Total Experiments Status chart shrinks on page navigation

Chaos Mesh Version

v2.8.0

Kubernetes Version

v1.36

Describe the bug

When initially landing on the Chaos Dashboard overview page, the Total Experiments Status donut chart renders at full scale and properly fills the container.

However, if you navigate away from the Dashboard to another page (such as Workflows or Experiments) and then return back to the Dashboard, the donut chart does not scale to full size. It remains small in the center of the card, leaving excessive empty whitespace and cutting off the rightmost legend labels (Deleti...).

https://github.com/user-attachments/assets/0fba0ae1-ec7e-46a6-a93c-df112e993407

Technical Details:

• ui/app/src/pages/Dashboard/index.tsx (line 136): The dashboard view is wrapped in Material-UI's <Grow in={true} style={{ transformOrigin: '0 0 0' }}>.
• When returning to the dashboard via client-side routing, <Grow> animates transform: scale(0) to scale(1). Nivo's ResponsivePie computes its container dimensions during this entrance animation before full scale is reached. Because CSS transform does not trigger layout reflows or ResizeObserver callbacks after animation completion, the chart remains locked at the smaller intermediate dimensions

To Reproduce

1. Open the Chaos Dashboard overview page (http://localhost:32256). Notice the chart initially renders at full scale within the card container.
2. Click on Workflows (or another tab) in the sidebar.
3. Click back on Dashboard in the sidebar.
4. Observe that the Total Experiments Status chart is now scaled down and stays small.
5. Refresh the browser page (Ctrl+R / Cmd+R) and observe that it recalculates to full scale.