Skip to content

fix(insights): Prevent backend overview widgets from growing out of control #93451

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conversation

gggritso
Copy link
Member

@gggritso gggritso commented Jun 12, 2025

Closes DAIN-629: Charts with footers grow uncontrollably in height in some cases. Sets the three-widget grid height via row height rather than overall height. This allows grid cell children to obey the height: 100% rule correctly. The widgets are overflowing their parents by a fraction of a pixel, because their heights are set with height: 100%. This doesn't work in a CSS grid context! The overflow causes ECharts to detect a resize, which sets the ECharts element to a pixel height without a fraction, which increases the widgets height, which causes a resize, and so on.

Note: This reveals another heinous bug to be fixed separately, tracked in DAIN-630

This allows grid cell children to obey the `height: 100%` rule
correctly.
@gggritso gggritso requested a review from DominikB2014 June 12, 2025 17:17
@gggritso gggritso requested a review from a team as a code owner June 12, 2025 17:17
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Jun 12, 2025
@gggritso gggritso merged commit 221d8bf into master Jun 12, 2025
45 checks passed
@gggritso gggritso deleted the georgegritsouk/dain-629-charts-with-footers-grow-uncontrollably-in-height-in-some branch June 12, 2025 17:33
andrewshie-sentry pushed a commit that referenced this pull request Jun 19, 2025
…ontrol (#93451)

Closes [DAIN-629: Charts with footers grow uncontrollably in height in
some
cases](https://linear.app/getsentry/issue/DAIN-629/charts-with-footers-grow-uncontrollably-in-height-in-some-cases).
Sets the three-widget grid height via row height rather than overall
height. This allows grid cell children to obey the `height: 100%` rule
correctly. The widgets are overflowing their parents by a fraction of a
pixel, because their heights are set with height: 100%. This doesn't
work in a CSS grid context! The overflow causes ECharts to detect a
resize, which sets the ECharts element to a pixel height without a
fraction, which increases the widgets height, which causes a resize, and
so on.

Note: This reveals _another_ heinous bug to be fixed separately, tracked
in DAIN-630
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants