sadpandajoe opened a new pull request, #44359: URL: https://github.com/apache/superset/pull/44359
### SUMMARY Fixes two independent dashboard edit-mode bugs reported in #37644. **Rows not shrinking.** `Row` measured its own `clientHeight` in a `useLayoutEffect` and fed that pixel value back as the explicit inline height of its own vertical droptarget siblings. Since `GridRow` is `height: fit-content`, those pinned siblings then counted toward the very measurement that produced them, so a row's height could grow with its tallest chart but never shrink back down. The droptargets now size purely in CSS — `height: 100%` for the absolutely-positioned ones, `align-self: stretch` for the in-flow ones — and the self-referential effect and its `containerHeight` state are gone. **Charts above a column could not be resized.** A column's `HoverMenu` is absolutely positioned above the column, so it necessarily overlaps the bottom edge of whatever sits above it. Its `z-index: 11` beat the sibling resize handles' `z-index: 10`, so hovering the bottom edge or bottom-right corner of a chart directly above a column hit the column's menu rather than the chart's handle, and no resize cursor appeared. Resize handles now stack one level above the hover menu. Rather than leaving three interdependent magic numbers scattered across files, the stacking levels this bug turns on are named in `src/dashboard/constants.ts` and derived from each other, so the required ordering (`empty droptarget < hover menu < resize handle`) is stated once. The handle deliberately sits at 12 rather than a large value: the surrounding code documents a scale where 99 is dashboard popovers and 100 the dashboard header, and a chart-local handle — which still hit-tests at `opacity: 0` — should not reach that layer. ### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF N/A ### TESTING INSTRUCTIONS Row shrinking: 1. Open a dashboard in edit mode and put two charts in the same row. 2. Increase one chart's height — the row grows. 3. Decrease the heights of all charts in the row — the row now shrinks to fit (previously it stayed at its high-water mark). Resizing a chart above a column: 1. In edit mode, add two charts to one row. 2. Add a column layout element to the row below, and a chart to the row below that. 3. Hover the bottom edge and bottom-right corner of the chart in the first row that sits directly above the column — the resize cursor appears and vertical/diagonal resize works. 4. Confirm the column's own hover menu (drag handle, delete, settings) is still reachable and that its buttons still work. Automated: `npm run test -- src/dashboard/components/gridComponents/Row src/dashboard/components/menu src/dashboard/components/resizable`. `Row.test.tsx` contains a regression test that reproduces the measure-and-pin feedback loop and fails without this change. ### ADDITIONAL INFORMATION - [x] Has associated issue: Fixes #37644 - [ ] Required feature flags: - [x] Changes UI - [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351)) - [ ] Migration is atomic, supports rollback & is backwards-compatible - [ ] Confirm DB migration upgrade and downgrade tested - [ ] Runtime estimates and downtime expectations provided - [ ] Introduces new feature or API - [ ] Removes existing feature or API -- 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]
