siemens · alexkaduk · Jun 13, 2026 · Jun 18, 2026 · Jun 18, 2026 · Jun 18, 2026
diff --git a/.env.pullrequest b/.env.pullrequest
@@ -0,0 +1,3 @@
+DOCS_BRANCH='main'
+DOCS_BRANCH_TYPE='pull request'
+DOCS_PR_NUMBER='2599'
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -15,30 +15,30 @@ import PropsApi from '@site/docs/autogenerated/api/ix-datetime-input/api.mdx';
 
 ## Basic
 
-<DatetimeInputPlayground height="29rem" />
+<DatetimeInputPlayground height="32rem" />
 
 ## Disabled
 
 <DatetimeInputDisabledPlayground />
 
 ## Label
 
-<DatetimeInputLabelPlayground height="29rem" />
+<DatetimeInputLabelPlayground height="32rem" />
 
 ## Readonly
 
 <DatetimeInputReadonlyPlayground />
 
 ## 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -81,6 +81,31 @@ 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 = () => {
+    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';
+      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 +187,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
@@ -68,7 +68,6 @@
   width: 100%;
   height: 100%;
   border: none;
-  overflow: auto;
 }
 
 .toolbar__right {