From 77f1c957f2e8a5fba2d1e9d60b60b220f2e96acd Mon Sep 17 00:00:00 2001
From: aPreciado88 <apreciado@esri.com>
Date: Thu, 8 Aug 2024 10:46:04 -0700
Subject: [PATCH 1/2] fix(stepper-item): update component to take full width
 when parent's layout is vertical

---
 .../src/components/stepper-item/stepper-item.scss             | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
index 64ad6e2bd1d..e79b1e20f41 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -188,6 +188,10 @@
   }
 }
 
+:host([layout="vertical"]) {
+  @apply w-full;
+}
+
 :host([layout="vertical"]) .container {
   @apply border-color-3
   mx-0

From d771161b5bf1f46925c1e012e604b0ddf48a6bc6 Mon Sep 17 00:00:00 2001
From: aPreciado88 <apreciado@esri.com>
Date: Thu, 8 Aug 2024 12:12:43 -0700
Subject: [PATCH 2/2] fix(stepper-item): add snapshot test

---
 .../src/components/stepper/stepper.stories.ts | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/packages/calcite-components/src/components/stepper/stepper.stories.ts b/packages/calcite-components/src/components/stepper/stepper.stories.ts
index 16c2df37218..812b37e28d8 100644
--- a/packages/calcite-components/src/components/stepper/stepper.stories.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.stories.ts
@@ -296,3 +296,22 @@ export const horizontalSingleLayout_TestOnly = (): string => html`
     </calcite-stepper>
   </div>
 `;
+
+export const verticalLayoutFullWidth = (): string =>
+  html`<calcite-stepper layout="vertical" scale="s" style="width: 1000px;">
+      <calcite-stepper-item heading="Scale s" description="Add members without sending invitations"
+        >Step 1 Content Goes Here</calcite-stepper-item
+      >
+    </calcite-stepper>
+
+    <calcite-stepper layout="vertical">
+      <calcite-stepper-item heading="Scale m" description="Add members without sending invitations"
+        >Step 1 Content Goes Here</calcite-stepper-item
+      >
+    </calcite-stepper>
+
+    <calcite-stepper layout="vertical" scale="l">
+      <calcite-stepper-item heading="Scale l" description="Add members without sending invitations"
+        >Step 1 Content Goes Here</calcite-stepper-item
+      >
+    </calcite-stepper>`;