diff --git a/packages/components/src/components/progress-indicator/_progress-indicator.scss b/packages/components/src/components/progress-indicator/_progress-indicator.scss
index 06bad35e2efe..c991dd835802 100644
--- a/packages/components/src/components/progress-indicator/_progress-indicator.scss
+++ b/packages/components/src/components/progress-indicator/_progress-indicator.scss
@@ -268,12 +268,17 @@
flex-direction: column;
}
+ .#{$prefix}--progress--vertical,
+ .#{$prefix}--progress-text {
+ display: flex;
+ flex-direction: column;
+ }
+
.#{$prefix}--progress--vertical .#{$prefix}--progress-step,
.#{$prefix}--progress--vertical .#{$prefix}--progress-step-button {
width: initial;
min-width: initial;
min-height: 3.625rem;
- flex-wrap: wrap;
align-content: flex-start;
}
@@ -302,8 +307,7 @@
.#{$prefix}--progress--vertical .#{$prefix}--progress-optional {
position: static;
width: 100%;
- margin-top: auto;
- margin-left: $carbon--spacing-07;
+ margin: auto 0;
}
.#{$prefix}--progress--vertical .#{$prefix}--progress-line {
diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator.js
index 4dd15fc4bc47..88077a9e90af 100644
--- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.js
+++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.js
@@ -127,12 +127,14 @@ export function ProgressStep({
invalid={invalid}
prefix={prefix}
/>
-
{secondaryLabel}
- ) : null} +{secondaryLabel}
+ ) : null} +