diff --git a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
index 38de6ebf143a..b54c83548705 100644
--- a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
@@ -331,7 +331,7 @@ const DatasetPanel = ({
}
title={tableName || ''}
>
-
+
{tableName}
>
diff --git a/superset-frontend/src/features/datasets/DatasetLayout/DatasetLayout.test.tsx b/superset-frontend/src/features/datasets/DatasetLayout/DatasetLayout.test.tsx
index 1b52afdf30d2..15c6268f2c7e 100644
--- a/superset-frontend/src/features/datasets/DatasetLayout/DatasetLayout.test.tsx
+++ b/superset-frontend/src/features/datasets/DatasetLayout/DatasetLayout.test.tsx
@@ -21,6 +21,7 @@ import DatasetLayout from 'src/features/datasets/DatasetLayout';
import Header from 'src/features/datasets/AddDataset/Header';
import LeftPanel from 'src/features/datasets/AddDataset/LeftPanel';
import DatasetPanel from 'src/features/datasets/AddDataset/DatasetPanel';
+import DatasetPanelComponent from 'src/features/datasets/AddDataset/DatasetPanel/DatasetPanel';
import RightPanel from 'src/features/datasets/AddDataset/RightPanel';
import Footer from 'src/features/datasets/AddDataset/Footer';
@@ -90,4 +91,72 @@ describe('DatasetLayout', () => {
expect(screen.getByText(/Cancel/i)).toBeVisible();
});
+
+ test('layout has proper flex constraints to prevent viewport overflow', () => {
+ const { container } = render(
+ null} />}
+ datasetPanel={}
+ footer={}
+ />,
+ {
+ useRedux: true,
+ useRouter: true,
+ },
+ );
+
+ // Find the wrapper
+ const layoutWrapper = container.querySelector(
+ '[data-test="dataset-layout-wrapper"]',
+ );
+ expect(layoutWrapper).toBeInTheDocument();
+
+ const outerRow = layoutWrapper?.firstElementChild as HTMLElement;
+ expect(outerRow).toBeInTheDocument();
+
+ if (outerRow) {
+ const styles = window.getComputedStyle(outerRow);
+ // Verify the critical flex properties that prevent viewport overflow
+ expect(styles.flexGrow).toBe('1');
+ expect(styles.minHeight).toBe('0');
+ expect(styles.display).toBe('flex');
+ expect(styles.flexDirection).toBe('row');
+ }
+ });
+
+ test('layout maintains viewport constraints with large content', () => {
+ const manyColumns = Array.from({ length: 100 }, (_, i) => ({
+ name: `column_${i}`,
+ type: 'VARCHAR',
+ }));
+
+ const { container } = render(
+ null} />}
+ leftPanel={ null} />}
+ datasetPanel={
+
+ }
+ footer={}
+ />,
+ {
+ useRedux: true,
+ useRouter: true,
+ },
+ );
+
+ const layoutWrapper = container.querySelector(
+ '[data-test="dataset-layout-wrapper"]',
+ );
+ expect(layoutWrapper).toBeInTheDocument();
+
+ // Verify footer is always present in DOM (should be visible)
+ const footer = screen.getByText(/Cancel/i);
+ expect(footer).toBeInTheDocument();
+ });
});
diff --git a/superset-frontend/src/features/datasets/styles.ts b/superset-frontend/src/features/datasets/styles.ts
index cd66aad0971a..105e6cfc1c6c 100644
--- a/superset-frontend/src/features/datasets/styles.ts
+++ b/superset-frontend/src/features/datasets/styles.ts
@@ -46,7 +46,8 @@ const Row = styled.div`
`;
export const OuterRow = styled(Row)`
- flex: 1 0 auto;
+ flex: 1 0 0;
+ min-height: 0;
position: relative;
`;