(superset) 01/01: fix(chart-creation): stop antd v6 Steps from doubling the icon-content gap

[jl...@apache.org]

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

sadpandajoe pushed a commit to branch fix-chart-creation-steps-gap-antd-v6
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 4045cc2994d69a8de76e4d1fbe150b323c1f7163
Author: sadpandajoe <jc...@gmail.com>
AuthorDate: Mon Aug 31 17:48:45 2026 +0000

    fix(chart-creation): stop antd v6 Steps from doubling the icon-content gap
    
    antd 6 added its own column-gap on .ant-steps-item-wrapper, which stacked
    on top of Superset's existing margin-right override on
    .ant-steps-item-icon, pushing every step's title/description ~16px right
    on the chart creation page.
    
    Co-Authored-By: Claude Sonnet 5 <no...@anthropic.com>
---
 .../src/pages/ChartCreation/ChartCreation.test.tsx         | 14 ++++++++++++++
 superset-frontend/src/pages/ChartCreation/index.tsx        |  7 +++++++
 2 files changed, 21 insertions(+)

diff --git a/superset-frontend/src/pages/ChartCreation/ChartCreation.test.tsx b/superset-frontend/src/pages/ChartCreation/ChartCreation.test.tsx
index 21b439ba84d..9588cc1dd92 100644
--- a/superset-frontend/src/pages/ChartCreation/ChartCreation.test.tsx
+++ b/superset-frontend/src/pages/ChartCreation/ChartCreation.test.tsx
@@ -107,6 +107,20 @@ test('renders a select and a VizTypeGallery', async () => {
   expect(screen.getByText(/choose chart type/i)).toBeInTheDocument();
 });
 
+test('does not double up the vertical Steps icon-to-content gap', async () => {
+  // antd 6 added its own icon->content gap on `.ant-steps-item-wrapper`
+  // (column-gap), stacking on top of the pre-existing `margin-right` on
+  // `.ant-steps-item-icon` and shifting every step's content to the right.
+  const { container } = await renderComponent();
+  const styledContainer = container.firstChild;
+  expect(styledContainer).toHaveStyleRule('column-gap', '0', {
+    target: '.ant-steps-item-wrapper',
+  });
+  expect(styledContainer).toHaveStyleRule('margin-right', '8px', {
+    target: '.ant-steps-item-icon',
+  });
+});
+
 test('renders dataset help text when user lacks dataset write permissions', async () => {
   await renderComponent();
   expect(screen.queryByText('Add a dataset')).not.toBeInTheDocument();
diff --git a/superset-frontend/src/pages/ChartCreation/index.tsx b/superset-frontend/src/pages/ChartCreation/index.tsx
index a4151f6517e..f9cd2496175 100644
--- a/superset-frontend/src/pages/ChartCreation/index.tsx
+++ b/superset-frontend/src/pages/ChartCreation/index.tsx
@@ -127,6 +127,13 @@ const StyledContainer = styled.div`
       display: none;
     }
 
+    /* antd 6 added its own icon->content gap on this flex wrapper
+       (column-gap), on top of the .ant-steps-item-icon margin-right below,
+       doubling the gap. Zero it out so the icon's margin is the only gap. */
+    &&&& .ant-steps-item-wrapper {
+      column-gap: 0;
+    }
+
     &&&& .ant-steps-item-icon {
       margin-right: ${theme.marginXS}px;
       width: ${theme.sizeUnit * 5}px;