fix(datasets): prevent viewport overflow in dataset creation page (#36166)

Author: EnxDev

superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx

@@ -331,7 +331,7 @@ const DatasetPanel = ({
             }
             title={tableName || ''}
           >
-            <Icons.InsertRowAboveOutlined />
+            <Icons.InsertRowAboveOutlined iconSize="xxl" />
             {tableName}
           </StyledHeader>
         </>

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(
+      <DatasetLayout
+        leftPanel={<LeftPanel setDataset={() => null} />}
+        datasetPanel={<DatasetPanel />}
+        footer={<Footer url="" />}
+      />,
+      {
+        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(
+      <DatasetLayout
+        header={<Header setDataset={() => null} />}
+        leftPanel={<LeftPanel setDataset={() => null} />}
+        datasetPanel={
+          <DatasetPanelComponent
+            tableName="large_table"
+            columnList={manyColumns}
+            hasError={false}
+            loading={false}
+          />
+        }
+        footer={<Footer url="" />}
+      />,
+      {
+        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();
+  });
 });

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;
 `;