sinanshamsudheen opened a new pull request, #38307:
URL: https://github.com/apache/superset/pull/38307
## SUMMARY
When toggling **“Show chart description”** on a dashboard chart, the bottom
portion of the **x-axis** was being cut off. This was a regression introduced
after **4.1.2**, most noticeably affecting **heatmap charts**.
**Root Cause**
The description height was measured inside a `useEffect`, which executes
after the browser has already painted the UI.
On the first render where `isExpanded = true`:
* `descriptionHeight` is still `0`
* `getChartHeight()` calculates chart dimensions without accounting for the
description
* The chart canvas renders too tall
* `ChartWrapper` has `overflow: hidden`
* The bottom of the chart (including x-axis labels) becomes clipped
**Fix**
Replaced `useEffect` with `useLayoutEffect` for measuring the description
height.
`useLayoutEffect` runs synchronously after React commits DOM updates but
**before the browser paints**. This ensures:
* The description height is measured immediately
* State is updated before paint
* The chart receives correct dimensions on the first visible render
* No clipping occurs
---
## TESTING INSTRUCTIONS
1. Open any dashboard
2. Add or locate a chart with a description
* Set description via:
**Explore → Chart tab → Description field**
3. On the dashboard, open the chart’s ⋮ menu
4. Click **Show chart description**
5. Verify:
* The full chart, including the x-axis, is visible
* No clipping occurs
6. Toggle the description off and on multiple times
* Confirm layout remains stable
7. Test specifically with **heatmap charts**, as they most reliably
reproduced the original issue
---
## ADDITIONAL INFORMATION
Fixes #33737
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
