From e18c34f7c19b4cfbcde229f9baa34e58ed2ed124 Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Wed, 20 May 2026 01:33:37 +0300
Subject: [PATCH] docs(stepper): add step height article

---
 .../src/content/en/components/layouts/stepper.mdx   | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/docs/xplat/src/content/en/components/layouts/stepper.mdx b/docs/xplat/src/content/en/components/layouts/stepper.mdx
index 022bd0f2bf..ba2ad56ab7 100644
--- a/docs/xplat/src/content/en/components/layouts/stepper.mdx
+++ b/docs/xplat/src/content/en/components/layouts/stepper.mdx
@@ -424,8 +424,19 @@ The sample below demonstrates all exposed step types and how they could be chang
 
 <Sample src="/layouts/stepper/steptypes" height={300} alt="{Platform} Step Types Example" />
 
+### Dynamic Step Height
 
-<div class="divider--half"></div>
+When the `Stepper` is horizontally oriented, the content area height is determined by the step with the most content. All other steps share this fixed height, which may result in visible empty space in steps with less content.
+
+To override the fixed height and have the content area adapt to the active step's content, set the **--body-grid-rows** CSS variable to **0fr** (the default is **1fr**):
+
+```css
+igc-stepper {
+  --body-grid-rows: 0fr;
+}
+```
+
+<Sample src="/layouts/stepper/step-height" height={490} alt="{Platform} Content Height Example" />
 
 ### Stepper Animations