fix(chart): correct resizable modal resize direction for top/left handles by Lothnic · Pull Request #43333 · apache/superset

Lothnic · 2026-08-19T10:41:40Z

SUMMARY

Resizing modals from top or left edges (Drill by, Drill to detail, View as table) produced inverted-corner behavior and drift because react-draggable and re-resizable both tried to control position independently.

Two changes in Modal.tsx:

Config merge fix: Merge caller resizableConfig with defaults so callers that only set minHeight/minWidth/defaultSize don't silently enable all 8 resize handles (top, left, topLeft, etc.)
Controlled Draggable: Switch Draggable to controlled mode and sync its position state with re-resizable's onResize callback, so resizing from top/left repositions the modal to anchor the opposite corner

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before: Dragging from top-left corner resizes from bottom-right instead, and resizing along one axis causes drift

After: Top-left corner correctly anchors the bottom-right, and resize direction matches the handle being dragged

TESTING INSTRUCTIONS

Open a chart on a dashboard, right-click → "Drill by"
Try resizing from the top-left corner — it should now correctly resize from that corner (bottom-right stays fixed)
Try resizing from the left edge — modal should stay anchored on the right
Existing bottom/right resize behavior should be unchanged

ADDITIONAL INFORMATION

Has associated issue: Resizable modals resize from the wrong corner and drift while resizing #43320
Required feature flags: None
No DB migration
Added 9 new tests in Modal.test.tsx (all passing)
All existing Modal-related tests pass (57/57)

CHECKLIST

CI checks pass
Tests added
PR title follows conventions

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

bito-code-review · 2026-08-19T10:41:50Z

Code Review Agent Run #67580a

Actionable Suggestions - 0

Review Details

Files reviewed - 2 · Commit Range: 85b67a9..85b67a9
- superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.test.tsx
- superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.tsx
Files skipped - 0
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by

codeant-ai-for-open-source · 2026-08-19T10:47:47Z

+  // mode lets us sync position with re-resizable's onResize so that resizing
+  // from top/left edges correctly repositions the modal (anchoring the
+  // opposite corner) instead of fighting over position.
+  const [position, setPosition] = useState({ x: 0, y: 0 });


Suggestion: The controlled position is initialized only once and is never reset when the modal closes or reopens. With Ant Design retaining the CustomModal component, a modal reopened after being dragged retains its previous translation, unlike the prior unmounted draggable state, and can reopen displaced or outside the viewport. Reset the position when show transitions to false or when a new modal opening begins. [stale reference]

Severity Level: Major ⚠️

- ❌ Reopened View as table modals retain stale screen offsets. - ❌ Dragged chart modals can reopen partly outside the viewport. - ⚠️ Users must manually reposition displaced modal dialogs.

Prompt for AI Agent 🤖

This is a comment left during a code review. **Path:** superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.tsx **Line:** 277:277 **Comment:** *Stale Reference: The controlled position is initialized only once and is never reset when the modal closes or reopens. With Ant Design retaining the `CustomModal` component, a modal reopened after being dragged retains its previous translation, unlike the prior unmounted draggable state, and can reopen displaced or outside the viewport. Reset the position when `show` transitions to false or when a new modal opening begins. Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise. Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix

👍 | 👎

bito-code-review · 2026-08-19T10:48:03Z

The flagged issue is correct. Because the position state is initialized inside CustomModal and not reset when the modal closes, the modal retains its previous drag offset when reopened. To resolve this, you should reset the position state to { x: 0, y: 0 } whenever the show prop transitions to false or when the modal is opened.

You can implement this by adding a useEffect hook in CustomModal that monitors the show prop:

useEffect(() => {
  if (!show) {
    setPosition({ x: 0, y: 0 });
  }
}, [show]);

Would you like me to check the other comments on this PR and implement fixes for them as well?

superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.tsx

useEffect(() => {
    if (!show) {
      setPosition({ x: 0, y: 0 });
    }
  }, [show]);

…dles Resizing modals from top or left edges (Drill by, Drill to detail, View as table) produced inverted-corner behavior and drift because react-draggable and re-resizable both tried to control position independently. Two changes in Modal.tsx: - Merge caller resizableConfig with defaults so callers that only set minHeight/minWidth/defaultSize don't silently enable all 8 resize handles (top, left, topLeft, etc.) - Switch Draggable to controlled mode and sync its position state with re-resizable's onResize callback, so resizing from top/left repositions the modal to anchor the opposite corner Also adds Modal.test.tsx covering config merge and position sync. Fixes apache#43320

bito-code-review · 2026-08-19T13:55:19Z

Code Review Agent Run #555f66

Actionable Suggestions - 0

Review Details

Files reviewed - 2 · Commit Range: e78f11f..e78f11f
- superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.test.tsx
- superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.tsx
Files skipped - 0
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by

rusackas · 2026-08-19T17:35:56Z

Would you mind adding before/after screenshots or video to the PR description? I guess we have "before" on the Issue, but "after" would be useful.

Copilot AI lite review requested due to automatic review settings August 19, 2026 10:41

pull-request-size Bot added the size/L label Aug 19, 2026

Copilot AI reviewed Aug 19, 2026

dosubot Bot added the change:frontend Requires changing the frontend label Aug 19, 2026

github-actions Bot added the packages label Aug 19, 2026

codeant-ai-for-open-source Bot reviewed Aug 19, 2026

View reviewed changes

Lothnic force-pushed the fix/modal-resize-direction branch from 85b67a9 to 7ff93a4 Compare August 19, 2026 10:52

Lothnic force-pushed the fix/modal-resize-direction branch from 7ff93a4 to e78f11f Compare August 19, 2026 11:12

Navigation Menu

Uh oh!

fix(chart): correct resizable modal resize direction for top/left handles - #43333

fix(chart): correct resizable modal resize direction for top/left handles#43333
Lothnic wants to merge 1 commit into
apache:masterfrom
Lothnic:fix/modal-resize-direction

Lothnic commented Aug 19, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

bito-code-review Bot commented Aug 19, 2026 •

edited

Loading

Code Review Agent Run #67580a

Uh oh!

codeant-ai-for-open-source Bot Aug 19, 2026

Uh oh!

bito-code-review Bot commented Aug 19, 2026

Uh oh!

bito-code-review Bot commented Aug 19, 2026 •

edited

Loading

Code Review Agent Run #555f66

Uh oh!

rusackas commented Aug 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

Lothnic commented Aug 19, 2026

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

CHECKLIST

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

bito-code-review Bot commented Aug 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #67580a

Uh oh!

codeant-ai-for-open-source Bot Aug 19, 2026

Choose a reason for hiding this comment

Uh oh!

bito-code-review Bot commented Aug 19, 2026

Uh oh!

bito-code-review Bot commented Aug 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #555f66

Uh oh!

rusackas commented Aug 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bito-code-review Bot commented Aug 19, 2026 •

edited

Loading

bito-code-review Bot commented Aug 19, 2026 •

edited

Loading