From b606327313ea923f224f6231328befe5fcc166ea Mon Sep 17 00:00:00 2001
From: Alessandro Colace <ale.colace@gmail.com>
Date: Mon, 4 May 2026 11:00:18 +0200
Subject: [PATCH] [core] Move MultistepDialog inline styles to CSS

MultistepDialog applied min-width: 800px and padding-bottom: 0 via inline
style on the underlying Dialog, forcing consumers to use !important to
override. Move both defaults into _multistep-dialog.scss under a single
.bp6-multistep-dialog class so they can be overridden with normal CSS
specificity. The MULTISTEP_DIALOG class constant already existed but was
never applied; it is now added to the rendered Dialog className.

The user-provided style prop continues to pass through via {...otherProps}.

Fixes #7710.
---
 .../core/src/components/dialog/_multistep-dialog.scss  |  8 ++++++++
 .../core/src/components/dialog/multistepDialog.tsx     | 10 +---------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/components/dialog/_multistep-dialog.scss b/packages/core/src/components/dialog/_multistep-dialog.scss
index 527c7c81f21..d02f90556ed 100644
--- a/packages/core/src/components/dialog/_multistep-dialog.scss
+++ b/packages/core/src/components/dialog/_multistep-dialog.scss
@@ -7,8 +7,16 @@
 @import "../../common/variables";
 
 $dialog-border-radius: $pt-border-radius !default;
+$multistep-dialog-min-width: 800px !default;
 $step-radius: $pt-border-radius !default;
 
+// Defaults previously applied via inline styles. Moved to CSS so consumers can override
+// without `!important`. Specificity is a single class, matching Dialog's own rules.
+.#{$ns}-multistep-dialog {
+  min-width: $multistep-dialog-min-width;
+  padding-bottom: 0;
+}
+
 .#{$ns}-multistep-dialog-panels {
   display: flex;
 
diff --git a/packages/core/src/components/dialog/multistepDialog.tsx b/packages/core/src/components/dialog/multistepDialog.tsx
index 2dbbf5513e9..6cae90bf2d4 100644
--- a/packages/core/src/components/dialog/multistepDialog.tsx
+++ b/packages/core/src/components/dialog/multistepDialog.tsx
@@ -99,10 +99,6 @@ interface MultistepDialogState {
     selectedIndex: number;
 }
 
-const PADDING_BOTTOM = 0;
-
-const MIN_WIDTH = 800;
-
 /**
  * Multi-step dialog component.
  *
@@ -130,13 +126,13 @@ export class MultistepDialog extends AbstractPureComponent<MultistepDialogProps,
                 isCloseButtonShown={isCloseButtonShown}
                 {...otherProps}
                 className={classNames(
+                    Classes.MULTISTEP_DIALOG,
                     {
                         [Classes.MULTISTEP_DIALOG_NAV_RIGHT]: navigationPosition === "right",
                         [Classes.MULTISTEP_DIALOG_NAV_TOP]: navigationPosition === "top",
                     },
                     className,
                 )}
-                style={this.getDialogStyle()}
             >
                 <div className={Classes.MULTISTEP_DIALOG_PANELS}>
                     {this.renderLeftPanel()}
@@ -156,10 +152,6 @@ export class MultistepDialog extends AbstractPureComponent<MultistepDialogProps,
         }
     }
 
-    private getDialogStyle() {
-        return { minWidth: MIN_WIDTH, paddingBottom: PADDING_BOTTOM, ...this.props.style };
-    }
-
     private renderLeftPanel() {
         return (
             <div className={Classes.MULTISTEP_DIALOG_LEFT_PANEL} role="tablist" aria-label="steps">