fix(dataset-editor): improve modal layout and fix Settings tab horizontal scroll (#39009)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: codeant-ai-for-open-source[bot] <244253245+codeant-ai-for-open-source[bot]@users.noreply.github.com>
This commit is contained in:
Michael S. Molina
2026-04-01 15:36:17 -03:00
committed by GitHub
parent 0bae05d4a9
commit 38f0dc74f7
3 changed files with 26 additions and 14 deletions

View File

@@ -45,11 +45,19 @@ const DatasourceEditor = AsyncEsmComponent(
() => import('../components/DatasourceEditor'),
);
const MODAL_HEIGHT_VH = 90;
const TOP_MARGIN_VH = (100 - MODAL_HEIGHT_VH) / 2;
const StyledDatasourceModal = styled(Modal)`
top: ${TOP_MARGIN_VH}vh;
padding-bottom: 0;
&& .ant-modal-content {
max-height: none;
margin-top: 0;
margin-bottom: 0;
min-height: 500px;
min-width: 500px;
}
&& .ant-modal-body {
@@ -367,7 +375,9 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
}
responsive
resizable
resizableConfig={{ defaultSize: { width: 'auto', height: '900px' } }}
resizableConfig={{
defaultSize: { width: 'auto', height: `${MODAL_HEIGHT_VH}vh` },
}}
draggable
>
<DatasourceEditor

View File

@@ -33,7 +33,6 @@ export const FoldersToolbar = styled.div`
top: -${theme.margin}px; // offsets tabs component bottom margin
z-index: 10;
background: ${theme.colorBgContainer};
padding-top: ${theme.paddingMD}px;
display: flex;
flex-direction: column;
gap: ${theme.paddingLG}px;

View File

@@ -370,6 +370,7 @@ const StyledTableTabs = styled(Tabs)`
flex: 1;
min-height: 0;
overflow: auto;
padding-top: ${({ theme }) => theme.paddingMD}px;
}
.ant-tabs-content {
@@ -2525,18 +2526,20 @@ class DatasourceEditor extends PureComponent<
key: TABS_KEYS.SETTINGS,
label: t('Settings'),
children: (
<Row gutter={16}>
<Col xs={24} md={12}>
<FormContainer>
{this.renderSettingsFieldset()}
</FormContainer>
</Col>
<Col xs={24} md={12}>
<FormContainer>
{this.renderAdvancedFieldset()}
</FormContainer>
</Col>
</Row>
<div style={{ overflowX: 'hidden' }}>
<Row gutter={16}>
<Col xs={24} md={12}>
<FormContainer>
{this.renderSettingsFieldset()}
</FormContainer>
</Col>
<Col xs={24} md={12}>
<FormContainer>
{this.renderAdvancedFieldset()}
</FormContainer>
</Col>
</Row>
</div>
),
},
]}