From b71ca2e98f5bb39fc0d984edc79a461773cb588a Mon Sep 17 00:00:00 2001
From: Andrei Zhaleznichenka <zhalea@amazon.de>
Date: Fri, 12 Jun 2026 12:36:10 +0200
Subject: [PATCH] fix: Fixes custom steps connector lines

---
 src/steps/internal.tsx | 37 +++++++++++++++++++++++++++----------
 src/steps/styles.scss  | 39 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 66 insertions(+), 10 deletions(-)

diff --git a/src/steps/internal.tsx b/src/steps/internal.tsx
index f8006950be..27209879d3 100644
--- a/src/steps/internal.tsx
+++ b/src/steps/internal.tsx
@@ -37,18 +37,35 @@ const CustomStep = ({
 }) => {
   const { status, statusIconAriaLabel } = step;
   const { header, details, icon } = renderStep(step);
+  const iconNode = icon ? icon : <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />;
+
+  if (orientation === 'horizontal') {
+    return (
+      <li className={styles.container}>
+        <div className={styles.header}>
+          {iconNode}
+          <hr className={styles.connector} role="none" />
+        </div>
+        <div className={styles['horizontal-header']}>{header}</div>
+        {details && <div className={styles.details}>{details}</div>}
+      </li>
+    );
+  }
+
+  // Vertical orientation: render the icon and the connector together in a column-1 "rail" so the
+  // connector starts directly beneath the icon and stretches the full height of the step. Unlike
+  // placing the header in the same row as the icon, this keeps the vertical line continuous even
+  // when the custom header wraps onto multiple lines.
   return (
-    <li className={styles.container}>
-      <div className={styles.header}>
-        {icon ? icon : <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />}
-        {orientation === 'vertical' ? header : <hr className={styles.connector} role="none" />}
-      </div>
-      {orientation === 'vertical' ? (
+    <li className={clsx(styles.container, styles['custom-vertical'])}>
+      <div className={styles.rail}>
+        {iconNode}
         <hr className={styles.connector} role="none" />
-      ) : (
-        <div className={styles['horizontal-header']}>{header}</div>
-      )}
-      {details && <div className={styles.details}>{details}</div>}
+      </div>
+      <div className={styles.content}>
+        <div className={styles.header}>{header}</div>
+        {details && <div className={styles.details}>{details}</div>}
+      </div>
     </li>
   );
 };
diff --git a/src/steps/styles.scss b/src/steps/styles.scss
index 7f7f9b7c80..238fe8ab5f 100644
--- a/src/steps/styles.scss
+++ b/src/steps/styles.scss
@@ -116,3 +116,42 @@
     }
   }
 }
+
+// Vertical custom steps: a column-1 "rail" stacks the icon above a connector that grows to fill
+// the full height of the step (header + details), keeping the vertical line continuous and
+// connecting consecutive steps regardless of header height. Placed after `.horizontal` so
+// selectors stay in ascending specificity order.
+.root > .list > .container.custom-vertical {
+  // The rail stretches to the row height (default `align-items: stretch`), which is driven by the
+  // content column, so the connector always spans the full step.
+  > .rail {
+    grid-column: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    > .connector {
+      grid-row: auto;
+      grid-column: auto;
+      flex: 1 1 auto;
+      background-color: awsui.$color-border-divider-default;
+      border-block: 0;
+      border-inline: 0;
+      inline-size: awsui.$border-divider-list-width;
+      block-size: auto;
+      min-block-size: awsui.$space-static-xs;
+      inset-inline-end: 0;
+      margin-block: awsui.$space-static-xxs 0;
+    }
+  }
+
+  > .content {
+    grid-column: 2;
+    // Allow long header/details text to wrap instead of stretching the grid column.
+    min-inline-size: 0;
+  }
+}
+
+.root > .list > .container.custom-vertical:last-of-type > .rail > .connector {
+  display: none;
+}