(superset) 03/03: test(DatasetLayout): add RTL test to check layout maintains viewport constraints with large content

[enzomartellucci]

This is an automated email from the ASF dual-hosted git repository.

enzomartellucci pushed a commit to branch enxdev/fix/dataset-viewport
in repository https://gitbox.apache.org/repos/asf/superset.git

commit c43a04ddc2de0ad442964758ec841be501de486e
Author: Enzo Martellucci <enzomartellu...@gmail.com>
AuthorDate: Tue Nov 18 11:26:37 2025 +0100

    test(DatasetLayout): add RTL test to check layout maintains viewport 
constraints with large content
---
 .../datasets/DatasetLayout/DatasetLayout.test.tsx  | 69 ++++++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git 
a/superset-frontend/src/features/datasets/DatasetLayout/DatasetLayout.test.tsx 
b/superset-frontend/src/features/datasets/DatasetLayout/DatasetLayout.test.tsx
index 1b52afdf30..15c6268f2c 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(
+      <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();
+  });
 });