fix(dataset-modal): fix folders tab scrollbar by establishing proper flex chain#38123
Merged
kgabryje merged 1 commit intoapache:masterfrom Feb 20, 2026
Merged
Conversation
…flex chain The DatasourceModal's CSS selectors targeted Bootstrap-era class names (.modal-content, .modal-body, etc.) instead of antd v5's .ant-modal-* classes, so the intended 900px height and flex layout were never applied. This left the modal body without a definite height, forcing FoldersEditor to use a hardcoded 70vh that caused an unnecessary scrollbar. Fix the selectors and establish a complete flex chain from the modal body through DatasourceContainer and Tabs down to FoldersContainer, which can now use height: 100% instead of the viewport-relative workaround. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Contributor
Code Review Agent Run #c42cd0Actionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help AI Code Review powered by |
![codeant-ai-for-open-source[bot]](https://avatars.githubusercontent.com/u/151810221?s=60&v=4){kind=small}
| display: flex; | ||
| flex-direction: column; | ||
| align-items: stretch; | ||
| } |
Contributor
There was a problem hiding this comment.
Suggestion: The modal body is given flex properties, but its parent .ant-modal-content is not a flex container, so the body's flex: 1 1 auto has no effect; this breaks the intended flex chain and can prevent the body (and nested tabs/folders) from correctly filling the 900px height, reintroducing layout/scroll issues. Make .ant-modal-content a flex container with column direction so the body can expand as intended. [logic error]
Severity Level: Major ⚠️
- ❌ Dataset edit modal body does not expand to 900px.
- ⚠️ Folders tab may show unnecessary inner scrollbars.
- ⚠️ Layout inconsistency versus previous flex-based modal behavior.
Suggested change
| } | |
| display: flex; | |
| flex-direction: column; | |
| align-items: stretch; |
Steps of Reproduction ✅
1. Start the Superset frontend with this PR applied and navigate to any page that opens
the dataset edit modal as described in the PR ("Open dataset modal" – implemented by
`DatasourceModal` in
`superset-frontend/src/components/Datasource/DatasourceModal/index.tsx`).
2. Open the dataset edit modal; in the Elements panel, locate the top-level modal content
element rendered by Ant Design (`.ant-modal-content`) that corresponds to
`StyledDatasourceModal` (defined at lines 47–60 in `index.tsx`).
3. Inspect the computed styles for `.ant-modal-content`: from `StyledDatasourceModal` it
only receives `height: 900px` (line 48) and no `display: flex`, so it remains a non-flex
container; then inspect `.ant-modal-body`, which has `flex: 1 1 auto; display: flex;
flex-direction: column;` from lines 52–55.
4. Because `.ant-modal-content` is not a flex (or grid) container, the `flex: 1 1 auto` on
`.ant-modal-body` has no effect as a flex item; the body's height is determined purely by
its content instead of expanding within the fixed 900px content height, which in practice
causes the inner Datasource editor (including the Folders tab) not to reliably fill the
available vertical space, reintroducing extra inner scrolling/whitespace that this PR is
meant to eliminate.Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** superset-frontend/src/components/Datasource/DatasourceModal/index.tsx
**Line:** 50:50
**Comment:**
*Logic Error: The modal body is given flex properties, but its parent `.ant-modal-content` is not a flex container, so the body's `flex: 1 1 auto` has no effect; this breaks the intended flex chain and can prevent the body (and nested tabs/folders) from correctly filling the 900px height, reintroducing layout/scroll issues. Make `.ant-modal-content` a flex container with column direction so the body can expand as intended.
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.
Antonio-RiveroMartnez
approved these changes
Feb 20, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
SUMMARY
The DatasourceModal's CSS selectors targeted Bootstrap-era class names (.modal-content, .modal-body, etc.) instead of antd v5's .ant-modal-* classes, so the intended 900px height and flex layout were never applied. This left the modal body without a definite height, forcing FoldersEditor to use a hardcoded 70vh that caused an unnecessary scrollbar.
Fix the selectors and establish a complete flex chain from the modal body through DatasourceContainer and Tabs down to FoldersContainer, which can now use height: 100% instead of the viewport-relative workaround.
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
TESTING INSTRUCTIONS
ADDITIONAL INFORMATION