From 52b89d726067b8691884b14a95658644ed171c13 Mon Sep 17 00:00:00 2001
From: Oleksandr Kaduk <o.kaduk@gmail.com>
Date: Sat, 13 Jun 2026 15:57:33 +0300
Subject: [PATCH 1/3] fix: tune playground preview heights and embedded iframe
 layout IX-4305

---
 docs/components/3d/overview.mdx             |  2 +-
 docs/components/bar-chart/overview.mdx      |  2 +-
 docs/components/card-list/code.mdx          |  2 +-
 docs/components/checkbox/code.mdx           |  2 +-
 docs/components/custom-field/code.mdx       |  2 +-
 docs/components/date-dropdown/code.mdx      |  4 ++--
 docs/components/date-picker/code.mdx        |  6 +++---
 docs/components/date-time-picker/code.mdx   |  2 +-
 docs/components/dropdown/code.mdx           |  4 ++--
 docs/components/event-list/code.mdx         |  6 +++---
 docs/components/flip/code.mdx               |  2 +-
 docs/components/gauge-chart/overview.mdx    |  6 +++---
 docs/components/input-date-time/code.mdx    | 10 ++++-----
 docs/components/input/code.mdx              |  2 +-
 docs/components/kpi/code.mdx                |  2 +-
 docs/components/layout-grid/code.mdx        |  6 +++---
 docs/components/line-chart/overview.mdx     |  6 +++---
 docs/components/message-modal/code.mdx      |  2 +-
 docs/components/modal/code.mdx              | 10 ++++-----
 docs/components/progress-indicator/code.mdx |  4 ++--
 src/components/Playground/index.tsx         | 24 +++++++++++++++++++++
 src/components/Playground/styles.module.css |  1 -
 22 files changed, 65 insertions(+), 42 deletions(-)

diff --git a/docs/components/3d/overview.mdx b/docs/components/3d/overview.mdx
index 238415ab7..986e271b6 100644
--- a/docs/components/3d/overview.mdx
+++ b/docs/components/3d/overview.mdx
@@ -16,7 +16,7 @@ The `echarts-gl` package extends ECharts to support 3D visualizations. With this
 
 ## Basic
 
-<EchartsSpecial3dPlayground height="40rem" />
+<EchartsSpecial3dPlayground height="42rem" />
 
 ## 3D-Charting
 
diff --git a/docs/components/bar-chart/overview.mdx b/docs/components/bar-chart/overview.mdx
index 7082edf15..27e636652 100644
--- a/docs/components/bar-chart/overview.mdx
+++ b/docs/components/bar-chart/overview.mdx
@@ -20,7 +20,7 @@ Common bar charts normally compare the values of different categories where the
 
 Stacked bar charts are typically used to visualize the relationship between the parts and the whole. Each bar is divided into segments, with each segment representing a different category.
 
-<EchartsBarHorizontalStackedPlayground height="40rem" />
+<EchartsBarHorizontalStackedPlayground height="42rem" />
 
 ## Dos and Don’ts
 
diff --git a/docs/components/card-list/code.mdx b/docs/components/card-list/code.mdx
index e36691f55..89c14fe39 100644
--- a/docs/components/card-list/code.mdx
+++ b/docs/components/card-list/code.mdx
@@ -11,6 +11,6 @@ import CardListPlayground from '@site/docs/autogenerated/playground/card-list.md
 
 ## Basic
 
-<CardListPlayground height="55rem" />
+<CardListPlayground height="58rem" />
 
 <PropsApi />
diff --git a/docs/components/checkbox/code.mdx b/docs/components/checkbox/code.mdx
index 011eead2a..eee44e27f 100644
--- a/docs/components/checkbox/code.mdx
+++ b/docs/components/checkbox/code.mdx
@@ -34,7 +34,7 @@ Enclosing related checkboxes within a single checkbox group container ensures co
 
 ## Validation
 
-<FormCheckboxValidationPlayground height="32rem" />
+<FormCheckboxValidationPlayground height="34rem" />
 
 <PropsApi />
 
diff --git a/docs/components/custom-field/code.mdx b/docs/components/custom-field/code.mdx
index 7fe931078..ced8573f3 100644
--- a/docs/components/custom-field/code.mdx
+++ b/docs/components/custom-field/code.mdx
@@ -22,6 +22,6 @@ Custom fields can be used to migrate from the existing input validation (native
 
 ## Validation
 
-<CustomFieldValidationPlayground height="24rem" />
+<CustomFieldValidationPlayground height="27rem" />
 
 <PropsApi />
diff --git a/docs/components/date-dropdown/code.mdx b/docs/components/date-dropdown/code.mdx
index d7a4ce23d..27ac5af96 100644
--- a/docs/components/date-dropdown/code.mdx
+++ b/docs/components/date-dropdown/code.mdx
@@ -11,10 +11,10 @@ import DateDropdownPresetsPlayground from '@site/docs/autogenerated/playground/d
 
 ## Basic
 
-<DateDropdownPlayground height="35rem" />
+<DateDropdownPlayground height="28rem" />
 
 ## With presets
 
-<DateDropdownPresetsPlayground height="35rem" />
+<DateDropdownPresetsPlayground height="28rem" />
 
 <PropsApi />
diff --git a/docs/components/date-picker/code.mdx b/docs/components/date-picker/code.mdx
index 5c5d900ab..43ff2e79b 100644
--- a/docs/components/date-picker/code.mdx
+++ b/docs/components/date-picker/code.mdx
@@ -12,16 +12,16 @@ import DatepickerLocalePlayground from '@site/docs/autogenerated/playground/date
 
 ## Basic
 
-<DatepickerRangePlayground height="35rem" />
+<DatepickerRangePlayground height="28rem" />
 
 ## Single Selection
 
-<DatepickerPlayground height="35rem" />
+<DatepickerPlayground height="25rem" />
 
 ## Translation
 
 The `ix-date-picker` can be configured using [BCP 47](https://tools.ietf.org/html/rfc5646) locale strings specifying the language to use generating or interpreting strings. More information can be found [here](https://moment.github.io/luxon/#/intl?id=default-locale)
 
-<DatepickerLocalePlayground height="35rem" />
+<DatepickerLocalePlayground height="32rem" />
 
 <PropsApi />
diff --git a/docs/components/date-time-picker/code.mdx b/docs/components/date-time-picker/code.mdx
index eb26f1e5d..45c4a1e05 100644
--- a/docs/components/date-time-picker/code.mdx
+++ b/docs/components/date-time-picker/code.mdx
@@ -10,7 +10,7 @@ import DatetimepickerPlayground from '@site/docs/autogenerated/playground/dateti
 
 ## Basic
 
-<DatetimepickerPlayground height="35rem" />
+<DatetimepickerPlayground height="28rem" />
 
 <!-- Re-add this when migrating to the rework components -->
 <!-- # Translation
diff --git a/docs/components/dropdown/code.mdx b/docs/components/dropdown/code.mdx
index ccfcee15f..6642a399f 100644
--- a/docs/components/dropdown/code.mdx
+++ b/docs/components/dropdown/code.mdx
@@ -16,11 +16,11 @@ import DropdownSubmenuPlayground from '@site/docs/autogenerated/playground/dropd
 
 ## Basic
 
-<DropdownPlayground height="28rem" />
+<DropdownPlayground height="22rem" />
 
 ## Dropdown with icon
 
-<DropdownIconPlayground height="18rem" />
+<DropdownIconPlayground height="22rem" />
 
 ## Dropdown with quick actions menu
 
diff --git a/docs/components/event-list/code.mdx b/docs/components/event-list/code.mdx
index bed60e2d1..86ee9282f 100644
--- a/docs/components/event-list/code.mdx
+++ b/docs/components/event-list/code.mdx
@@ -30,15 +30,15 @@ import EventListCustomItemHeightInNumberPlayground from '@site/docs/autogenerate
 
 ## Predefined item height
 
-<EventListCustomItemHeightPlayground height="15rem" />
+<EventListCustomItemHeightPlayground height="16rem" />
 
 ## Custom item height
 
-<EventListCustomItemHeightInNumberPlayground height="15rem" />
+<EventListCustomItemHeightInNumberPlayground height="11rem" />
 
 ## Compact
 
-<EventListCompactPlayground height="14rem" />
+<EventListCompactPlayground height="13rem" />
 
 <PropsApi />
 <ItemPropsApi />
diff --git a/docs/components/flip/code.mdx b/docs/components/flip/code.mdx
index 25831c209..2cb1af5f9 100644
--- a/docs/components/flip/code.mdx
+++ b/docs/components/flip/code.mdx
@@ -10,6 +10,6 @@ import FlipTilePlayground from '@site/docs/autogenerated/playground/flip-tile.md
 
 ## Basic
 
-<FlipTilePlayground height="35rem" />
+<FlipTilePlayground height="50rem" />
 
 <PropsApi />
diff --git a/docs/components/gauge-chart/overview.mdx b/docs/components/gauge-chart/overview.mdx
index 707b08bd4..d613a1628 100644
--- a/docs/components/gauge-chart/overview.mdx
+++ b/docs/components/gauge-chart/overview.mdx
@@ -15,19 +15,19 @@ import EchartsProgressArcPlayground from '@site/docs/autogenerated/playground/ec
 
 Metrics gauge charts, also known as dial or speedometer charts, are an effective way to visualize key performance indicators (KPIs) and other metrics. These charts indicate the current value of a metric within a predefined range, often segmented into different zones, e.g. red for poor performance, green for good performance, etc.
 
-<EchartsGaugePlayground height="25rem" />
+<EchartsGaugePlayground height="42rem" />
 
 ## Circle gauge charts
 
 Circle gauge charts, also known as radial progress charts or circular progress bars, are a visually appealing way to represent data and track progress towards a goal. These charts use a circle to display the percentage of completion, making it easy to quickly grasp the status of a project or task. The circle is typically filled in proportion to the progress made, with the center often displaying the percentage value.
 
-<EchartsProgressCirclePlayground height="30rem" />
+<EchartsProgressCirclePlayground height="24rem" />
 
 ## Arc gauge charts
 
 Arc gauge charts, also known as semi-circular progress bars, are a dynamic way to visualize data and track progress. Unlike circle charts, arc gauge charts use a semi-circle or arc to represent the percentage of completion. This design can be particularly effective in dashboards and user interfaces where users need a clear and engaging visual representation but space is limited.
 
-<EchartsProgressArcPlayground height="30rem" />
+<EchartsProgressArcPlayground height="22rem" />
 
 ## Dos and Don’ts
 
diff --git a/docs/components/input-date-time/code.mdx b/docs/components/input-date-time/code.mdx
index 2a98e864a..be82bfc3d 100644
--- a/docs/components/input-date-time/code.mdx
+++ b/docs/components/input-date-time/code.mdx
@@ -15,7 +15,7 @@ import PropsApi from '@site/docs/autogenerated/api/ix-datetime-input/api.mdx';
 
 ## Basic
 
-<DatetimeInputPlayground height="29rem" />
+<DatetimeInputPlayground height="32rem" />
 
 ## Disabled
 
@@ -23,7 +23,7 @@ import PropsApi from '@site/docs/autogenerated/api/ix-datetime-input/api.mdx';
 
 ## Label
 
-<DatetimeInputLabelPlayground height="29rem" />
+<DatetimeInputLabelPlayground height="32rem" />
 
 ## Readonly
 
@@ -31,14 +31,14 @@ import PropsApi from '@site/docs/autogenerated/api/ix-datetime-input/api.mdx';
 
 ## Validation
 
-<DatetimeInputValidationPlayground height="40rem" />
+<DatetimeInputValidationPlayground height="52rem" />
 
 ## Slots
 
-<DatetimeInputWithSlotsPlayground height="29rem" />
+<DatetimeInputWithSlotsPlayground height="32rem" />
 
 ## Min- and max-date
 
-<DatetimeInputMinMaxDatePlayground height="29rem" />
+<DatetimeInputMinMaxDatePlayground height="32rem" />
 
 <PropsApi />
diff --git a/docs/components/input/code.mdx b/docs/components/input/code.mdx
index 7371c7fef..b89faa553 100644
--- a/docs/components/input/code.mdx
+++ b/docs/components/input/code.mdx
@@ -37,7 +37,7 @@ import PropsApi from '@site/docs/autogenerated/api/ix-input/api.mdx';
 
 ## Types
 
-<InputTypesPlayground height="24rem" />
+<InputTypesPlayground height="26rem" />
 
 ## Validation
 
diff --git a/docs/components/kpi/code.mdx b/docs/components/kpi/code.mdx
index b4e6a119d..e91c30bff 100644
--- a/docs/components/kpi/code.mdx
+++ b/docs/components/kpi/code.mdx
@@ -10,6 +10,6 @@ import KpiPlayground from '@site/docs/autogenerated/playground/kpi.mdx';
 
 ## Basic
 
-<KpiPlayground height="28rem" />
+<KpiPlayground height="20rem" />
 
 <PropsApi />
diff --git a/docs/components/layout-grid/code.mdx b/docs/components/layout-grid/code.mdx
index 6801d77c5..14ae45032 100644
--- a/docs/components/layout-grid/code.mdx
+++ b/docs/components/layout-grid/code.mdx
@@ -14,15 +14,15 @@ import GridPaddingPlayground from '@site/docs/autogenerated/playground/grid-padd
 
 ## Basic
 
-<GridPlayground height="15rem" />
+<GridPlayground height="16rem" />
 
 ## Size
 
-<GridSizePlayground height="17rem" />
+<GridSizePlayground height="28.5rem" />
 
 ## Padding
 
-<GridPaddingPlayground height="17rem" />
+<GridPaddingPlayground height="24.5rem" />
 
 <PropsApi />
 <ColPropsApi />
diff --git a/docs/components/line-chart/overview.mdx b/docs/components/line-chart/overview.mdx
index 792439991..f62283522 100644
--- a/docs/components/line-chart/overview.mdx
+++ b/docs/components/line-chart/overview.mdx
@@ -15,19 +15,19 @@ import EchartsLineAdvancedPlayground from '@site/docs/autogenerated/playground/e
 
 Basic line charts use a series of data points connected by straight lines to show changes in values, making it easy to identify patterns, trends and fluctuations. Line charts are particularly effective for displaying continuous data, such as stock prices, temperature changes or sales figures. Their simplicity and clarity make them a popular choice for dashboards, where understanding data trends is essential.
 
-<EchartsLineSimplePlayground height="40rem" />
+<EchartsLineSimplePlayground height="41rem" />
 
 ## Multi-y-axis line charts
 
 Multi-y-axis line charts are used to compare multiple data series that have different scales or units of measurement. By using multiple y-axes, you can display data with different ranges on the same chart, making it easier to compare trends and relationships between variables. Multi-y-axis line charts are particularly useful when visualizing data with distinct patterns or trends.
 
-<EchartsLineMultipleYAxisPlayground height="40rem" />
+<EchartsLineMultipleYAxisPlayground height="41rem" />
 
 ## Advanced line charts
 
 Advanced line charts are an enhanced version of basic line charts, designed to provide deeper insights and a more detailed analysis of data trends. These charts often incorporate features such as multiple data series, interactive elements, and additional annotations to highlight key points or events. Advanced line charts can also include trend lines, moving averages and other statistical tools to help identify patterns and correlations.
 
-<EchartsLineAdvancedPlayground height="40rem" />
+<EchartsLineAdvancedPlayground height="41rem" />
 
 ## Dos and Don’ts
 
diff --git a/docs/components/message-modal/code.mdx b/docs/components/message-modal/code.mdx
index 362ec338a..b65bdc13d 100644
--- a/docs/components/message-modal/code.mdx
+++ b/docs/components/message-modal/code.mdx
@@ -17,7 +17,7 @@ How to open a message modal is independent of the framework in use. Note that yo
 - success
 - question
 
-<ModalMessagePlayground height="18rem" />
+<ModalMessagePlayground height="16rem" />
 
 The `showMessage` method returns a Listener with the following signature:
 
diff --git a/docs/components/modal/code.mdx b/docs/components/modal/code.mdx
index de2d1deeb..6f01d1dfa 100644
--- a/docs/components/modal/code.mdx
+++ b/docs/components/modal/code.mdx
@@ -59,7 +59,7 @@ Select the appropriate section below for the respective usage information.
       'modal-by-template.ts': 'angular/modal-by-template.ts',
     },
   }}
-  height={props.height}
+  height="15rem"
   onlyFramework="angular"
 ></Playground>
 
@@ -80,7 +80,7 @@ Select the appropriate section below for the respective usage information.
       'modal-by-instance-content.ts': 'angular/modal-by-instance-content.ts',
     },
   }}
-  height={props.height}
+  height="15rem"
   onlyFramework="angular"
 ></Playground>
 
@@ -109,7 +109,7 @@ open(config: ModalConfig<TData: any, TReason: any>): Promise<ModalInstance<TData
       'modal.tsx': 'react/modal.tsx',
     },
   }}
-  height={props.height}
+  height="15rem"
   onlyFramework="react"
 ></Playground>
 
@@ -147,7 +147,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       'modal.vue': 'vue/modal.vue',
     },
   }}
-  height={props.height}
+  height="15rem"
   onlyFramework="vue"
 ></Playground>
 
@@ -192,7 +192,7 @@ import { IxApplicationContext } from '@siemens/ix-vue';
       'modal.html': 'html/modal.html',
     },
   }}
-  height={props.height}
+  height="15rem"
   onlyFramework="html"
 ></Playground>
 
diff --git a/docs/components/progress-indicator/code.mdx b/docs/components/progress-indicator/code.mdx
index de95bda43..330618b58 100644
--- a/docs/components/progress-indicator/code.mdx
+++ b/docs/components/progress-indicator/code.mdx
@@ -17,11 +17,11 @@ import CircularStatusPlayground from '@site/docs/autogenerated/playground/progre
 
 ## Linear
 
-<Playground />
+<Playground height="6rem" />
 
 ## Circular
 
-<CircularPlayground />
+<CircularPlayground height="8rem" />
 
 ## Linear status
 
diff --git a/src/components/Playground/index.tsx b/src/components/Playground/index.tsx
index c6953013e..e44efc998 100644
--- a/src/components/Playground/index.tsx
+++ b/src/components/Playground/index.tsx
@@ -81,6 +81,29 @@ export type PlaygroundProps = Readonly<{
   onlyFramework?: FrameworkTypes;
 }>;
 
+function normalizeEmbeddedPreviewDocument(iframe: HTMLIFrameElement): void {
+  const doc = iframe.contentDocument;
+  const win = iframe.contentWindow;
+  if (!doc || !win) {
+    return;
+  }
+
+  const apply = () => {
+    doc.documentElement.style.removeProperty('overflow');
+    doc.documentElement.style.height = 'auto';
+    if (doc.body) {
+      doc.body.style.removeProperty('overflow');
+      doc.body.style.height = 'auto';
+      doc.body.style.minHeight = '0';
+    }
+  };
+
+  apply();
+
+  const initPromise = (win as Window & { ixInitPromise?: Promise<unknown> }).ixInitPromise;
+  initPromise?.then(apply).catch(() => undefined);
+}
+
 function Playground(props: PlaygroundProps) {
   const defaultTheme = useDefaultTheme();
   const { playgroundThemeVariant } = usePlaygroundThemeVariant();
@@ -162,6 +185,7 @@ function Playground(props: PlaygroundProps) {
                 title={`Preview for ${props.name}`}
                 src={iframeSrc}
                 className={styles.iframe}
+                onLoad={(event) => normalizeEmbeddedPreviewDocument(event.currentTarget)}
               ></iframe>
             ) : (
               <SourceCode />
diff --git a/src/components/Playground/styles.module.css b/src/components/Playground/styles.module.css
index 9b756b654..d3522ba52 100644
--- a/src/components/Playground/styles.module.css
+++ b/src/components/Playground/styles.module.css
@@ -68,7 +68,6 @@
   width: 100%;
   height: 100%;
   border: none;
-  overflow: auto;
 }
 
 .toolbar__right {

From 6202e7c9fb0330adae198d526b7779f1eb1507a9 Mon Sep 17 00:00:00 2001
From: Oleksandr Kaduk <o.kaduk@gmail.com>
Date: Thu, 18 Jun 2026 20:22:20 +0300
Subject: [PATCH 2/3] fix: tune playground preview heights and embedded iframe
 layout IX-4305

---
 src/components/Playground/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Playground/index.tsx b/src/components/Playground/index.tsx
index e44efc998..552d1dc05 100644
--- a/src/components/Playground/index.tsx
+++ b/src/components/Playground/index.tsx
@@ -89,8 +89,10 @@ function normalizeEmbeddedPreviewDocument(iframe: HTMLIFrameElement): void {
   }
 
   const apply = () => {
-    doc.documentElement.style.removeProperty('overflow');
-    doc.documentElement.style.height = 'auto';
+    if (doc.documentElement) {
+      doc.documentElement.style.removeProperty('overflow');
+      doc.documentElement.style.height = 'auto';
+    }
     if (doc.body) {
       doc.body.style.removeProperty('overflow');
       doc.body.style.height = 'auto';

From ffe9bc41a8437d5d5ae0bd1f14c2229962e17ea3 Mon Sep 17 00:00:00 2001
From: Oleksandr Kaduk <o.kaduk@gmail.com>
Date: Thu, 18 Jun 2026 20:42:44 +0300
Subject: [PATCH 3/3] fix: tune playground preview heights and embedded iframe
 layout IX-4305

---
 .env.pullrequest | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 .env.pullrequest

diff --git a/.env.pullrequest b/.env.pullrequest
new file mode 100644
index 000000000..7dfddfd85
--- /dev/null
+++ b/.env.pullrequest
@@ -0,0 +1,3 @@
+DOCS_BRANCH='main'
+DOCS_BRANCH_TYPE='pull request'
+DOCS_PR_NUMBER='2599'
\ No newline at end of file