From 9ceebbcc46b57dd5ece252c342231a939bff9e72 Mon Sep 17 00:00:00 2001
From: Maximilian Koeller <maximilian.koeller@siemens.com>
Date: Thu, 18 Jun 2026 17:42:18 +0200
Subject: [PATCH 1/4] docs(main-detail-container): move configuration controls
 into card

Aligns with many other examples we have.
---
 .../si-main-detail-container-block.html       |  45 +++--
 .../si-main-detail-container-block.ts         |   6 +-
 .../si-main-detail-container.html             | 182 +++++++++---------
 .../si-main-detail-container.ts               |   6 +-
 4 files changed, 129 insertions(+), 110 deletions(-)

diff --git a/src/app/examples/si-main-detail-container/si-main-detail-container-block.html b/src/app/examples/si-main-detail-container/si-main-detail-container-block.html
index dd6aabc4df..763df6c659 100644
--- a/src/app/examples/si-main-detail-container/si-main-detail-container-block.html
+++ b/src/app/examples/si-main-detail-container/si-main-detail-container-block.html
@@ -12,7 +12,6 @@
   (hasLargeSizeChange)="isLarge = $event"
   (mainContainerWidthChange)="table.recalculate()"
 >
-  >
   <si-search-bar
     slot="mainSearch"
     placeholder="Search"
@@ -67,25 +66,29 @@
   </div>
 </si-main-detail-container>
 
-<form class="p-5 e2e-ignore">
-  <div class="form-check">
-    <input
-      type="checkbox"
-      class="form-check-input"
-      id="customCheckResizableParts"
-      [checked]="resizableParts"
-      (change)="resizableParts = !resizableParts"
-    />
-    <label class="form-check-label" for="customCheckResizableParts">Resizable Parts</label>
-  </div>
-  <div class="form-check">
-    <input
-      #checkbox
-      type="checkbox"
-      class="form-check-input"
-      id="customCheckMobileLayout"
-      (change)="toggleMobileLayout(checkbox.checked)"
-    />
-    <label class="form-check-label" for="customCheckMobileLayout">Simulate mobile layout</label>
+<form class="e2e-ignore px-6 pb-6">
+  <div class="card mt-4">
+    <div class="card-header">Settings</div>
+    <div class="card-body">
+      <si-form-item label="Resizable parts">
+        <input
+          type="checkbox"
+          class="form-check-input"
+          id="customCheckResizableParts"
+          name="resizableParts"
+          [(ngModel)]="resizableParts"
+        />
+      </si-form-item>
+      <si-form-item label="Simulate mobile layout">
+        <input
+          type="checkbox"
+          class="form-check-input"
+          id="customCheckMobileLayout"
+          name="simulateMobileLayout"
+          [ngModel]
+          (ngModelChange)="toggleMobileLayout($event)"
+        />
+      </si-form-item>
+    </div>
   </div>
 </form>
diff --git a/src/app/examples/si-main-detail-container/si-main-detail-container-block.ts b/src/app/examples/si-main-detail-container/si-main-detail-container-block.ts
index 5c069b7780..221642f809 100644
--- a/src/app/examples/si-main-detail-container/si-main-detail-container-block.ts
+++ b/src/app/examples/si-main-detail-container/si-main-detail-container-block.ts
@@ -4,12 +4,14 @@
  */
 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import {
   ContentActionBarMainItem,
   SiContentActionBarComponent
 } from '@siemens/element-ng/content-action-bar';
 import { SI_DATATABLE_CONFIG, SiDatatableModule } from '@siemens/element-ng/datatable';
 import { SiEmptyStateComponent } from '@siemens/element-ng/empty-state';
+import { SiFormItemComponent } from '@siemens/element-ng/form';
 import { SiMainDetailContainerComponent } from '@siemens/element-ng/main-detail-container';
 import { BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
 import { SiSearchBarModule } from '@siemens/element-ng/search-bar';
@@ -22,12 +24,14 @@ import { CorporateEmployee, DataService, PageRequest } from '../datatable/data.s
   selector: 'app-sample',
   imports: [
     CommonModule,
+    FormsModule,
     SiMainDetailContainerComponent,
     SiSearchBarModule,
     SiContentActionBarComponent,
     NgxDatatableModule,
     SiDatatableModule,
-    SiEmptyStateComponent
+    SiEmptyStateComponent,
+    SiFormItemComponent
   ],
   templateUrl: './si-main-detail-container-block.html',
   styleUrl: './si-main-detail-container-block.scss',
diff --git a/src/app/examples/si-main-detail-container/si-main-detail-container.html b/src/app/examples/si-main-detail-container/si-main-detail-container.html
index 03125733cf..928a20a7e2 100644
--- a/src/app/examples/si-main-detail-container/si-main-detail-container.html
+++ b/src/app/examples/si-main-detail-container/si-main-detail-container.html
@@ -1,96 +1,104 @@
 <si-main-detail-container
   stateId="si-main-detail-demo"
-  [style.maxWidth.px]="containerMaxWidth ? containerMaxWidth : null"
-  [largeLayoutBreakpoint]="largeLayoutBreakpoint"
-  [heading]="heading"
-  [truncateHeading]="truncateHeading"
-  [detailsHeading]="detailsHeading"
-  [resizableParts]="resizableParts"
-  [hideBackButton]="false"
-  [mainContainerWidth]="50"
-  [minMainSize]="200"
-  [minDetailSize]="100"
-  [(detailsActive)]="detailsActive"
-  (hasLargeSizeChange)="isLarge = $event"
-  (mainContainerWidthChange)="onSplitChange($event)"
->
-  <si-search-bar
-    slot="mainSearch"
-    placeholder="Search"
-    (searchChange)="searchTermChanged($event)"
-  />
-  <si-content-action-bar slot="mainActions" viewType="collapsible" [primaryActions]="mainActions" />
-
-  <ngx-datatable
-    #table
-    slot="mainData"
-    class="list-view table-element"
-    siDatatableInteraction
-    columnMode="force"
-    selectionType="single"
-    [cssClasses]="tableConfig.cssClasses"
-    [rows]="rows"
-    [columns]="[
-      { name: 'Name', sortable: false },
-      { name: 'Role', sortable: false },
-      { name: 'Company', sortable: false }
-    ]"
-    [reorderable]="false"
-    [headerHeight]="tableConfig.headerHeight"
-    [rowHeight]="tableConfig.rowHeightSmall"
-    [footerHeight]="0"
-    [ghostLoadingIndicator]="isLoading > 0"
-    [scrollbarV]="true"
-    [externalPaging]="true"
-    [externalSorting]="true"
-    [count]="totalElements"
-    [offset]="pageNumber"
-    [selected]="selectedEntities"
-    [datatableInteractionAutoSelect]="isLarge"
-    (page)="setPage($event)"
-    (select)="datatableOnSelect($event.selected)"
+    [style.maxWidth.px]="containerMaxWidth ? containerMaxWidth : null"
+    [largeLayoutBreakpoint]="largeLayoutBreakpoint"
+    [heading]="heading"
+    [truncateHeading]="truncateHeading"
+    [detailsHeading]="detailsHeading"
+    [resizableParts]="resizableParts"
+    [hideBackButton]="false"
+    [mainContainerWidth]="50"
+    [minMainSize]="200"
+    [minDetailSize]="100"
+    [(detailsActive)]="detailsActive"
+    (hasLargeSizeChange)="isLarge = $event"
+    (mainContainerWidthChange)="onSplitChange($event)"
   >
-    <si-empty-state empty-content icon="element-users" heading="No users to display" />
-  </ngx-datatable>
+    <si-search-bar
+      slot="mainSearch"
+      placeholder="Search"
+      (searchChange)="searchTermChanged($event)"
+    />
+    <si-content-action-bar
+      slot="mainActions"
+      viewType="collapsible"
+      [primaryActions]="mainActions"
+    />
 
-  <!-- Detail (content slots: detailActions | details) -->
-  <!-- detailActions -->
-  <si-content-action-bar
-    slot="detailActions"
-    viewType="collapsible"
-    [primaryActions]="detailActions"
-  />
-  <!-- details -->
-  <div slot="details" class="card">
-    <div class="card-body overflow-auto pt-4">
-      @if (selectedEntity) {
-        {{ selectedEntity | json }}
-      } @else {
-        <div class="mx-auto text-center">No entity selected.</div>
-      }
+    <ngx-datatable
+      #table
+      slot="mainData"
+      class="list-view table-element"
+      siDatatableInteraction
+      columnMode="force"
+      selectionType="single"
+      [cssClasses]="tableConfig.cssClasses"
+      [rows]="rows"
+      [columns]="[
+        { name: 'Name', sortable: false },
+        { name: 'Role', sortable: false },
+        { name: 'Company', sortable: false }
+      ]"
+      [reorderable]="false"
+      [headerHeight]="tableConfig.headerHeight"
+      [rowHeight]="tableConfig.rowHeightSmall"
+      [footerHeight]="0"
+      [ghostLoadingIndicator]="isLoading > 0"
+      [scrollbarV]="true"
+      [externalPaging]="true"
+      [externalSorting]="true"
+      [count]="totalElements"
+      [offset]="pageNumber"
+      [selected]="selectedEntities"
+      [datatableInteractionAutoSelect]="isLarge"
+      (page)="setPage($event)"
+      (select)="datatableOnSelect($event.selected)"
+    >
+      <si-empty-state empty-content icon="element-users" heading="No users to display" />
+    </ngx-datatable>
+
+    <!-- Detail (content slots: detailActions | details) -->
+    <!-- detailActions -->
+    <si-content-action-bar
+      slot="detailActions"
+      viewType="collapsible"
+      [primaryActions]="detailActions"
+    />
+    <!-- details -->
+    <div slot="details" class="card">
+      <div class="card-body overflow-auto pt-4">
+        @if (selectedEntity) {
+          {{ selectedEntity | json }}
+        } @else {
+          <div class="mx-auto text-center">No entity selected.</div>
+        }
+      </div>
     </div>
-  </div>
 </si-main-detail-container>
 
-<form class="p-5 e2e-ignore">
-  <div class="form-check">
-    <input
-      type="checkbox"
-      class="form-check-input"
-      id="customCheckResizableParts"
-      [checked]="resizableParts"
-      (change)="resizableParts = !resizableParts"
-    />
-    <label class="form-check-label" for="customCheckResizableParts">Resizable Parts</label>
-  </div>
-  <div class="form-check">
-    <input
-      #checkbox
-      type="checkbox"
-      class="form-check-input"
-      id="customCheckMobileLayout"
-      (change)="toggleMobileLayout(checkbox.checked)"
-    />
-    <label class="form-check-label" for="customCheckMobileLayout">Simulate mobile layout</label>
+<form class="e2e-ignore px-6 pb-6">
+  <div class="card mt-4">
+    <div class="card-header">Settings</div>
+    <div class="card-body">
+      <si-form-item label="Resizable parts">
+        <input
+          type="checkbox"
+          class="form-check-input"
+          id="customCheckResizableParts"
+          name="resizableParts"
+          [(ngModel)]="resizableParts"
+        />
+      </si-form-item>
+      <si-form-item label="Simulate mobile layout">
+        <input
+          type="checkbox"
+          class="form-check-input"
+          id="customCheckMobileLayout"
+          name="simulateMobileLayout"
+          ngModel
+          (ngModelChange)="toggleMobileLayout($event)"
+        />
+      </si-form-item>
+    </div>
   </div>
 </form>
diff --git a/src/app/examples/si-main-detail-container/si-main-detail-container.ts b/src/app/examples/si-main-detail-container/si-main-detail-container.ts
index 1ba6e0a14d..16dcac4434 100644
--- a/src/app/examples/si-main-detail-container/si-main-detail-container.ts
+++ b/src/app/examples/si-main-detail-container/si-main-detail-container.ts
@@ -10,12 +10,14 @@ import {
   inject,
   viewChild
 } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import {
   ContentActionBarMainItem,
   SiContentActionBarComponent
 } from '@siemens/element-ng/content-action-bar';
 import { SI_DATATABLE_CONFIG, SiDatatableModule } from '@siemens/element-ng/datatable';
 import { SiEmptyStateComponent } from '@siemens/element-ng/empty-state';
+import { SiFormItemComponent } from '@siemens/element-ng/form';
 import { SiMainDetailContainerComponent } from '@siemens/element-ng/main-detail-container';
 import { BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
 import { SiSearchBarModule } from '@siemens/element-ng/search-bar';
@@ -28,12 +30,14 @@ import { CorporateEmployee, DataService, PageRequest } from '../datatable/data.s
   selector: 'app-sample',
   imports: [
     CommonModule,
+    FormsModule,
     SiMainDetailContainerComponent,
     SiSearchBarModule,
     SiContentActionBarComponent,
     NgxDatatableModule,
     SiDatatableModule,
-    SiEmptyStateComponent
+    SiEmptyStateComponent,
+    SiFormItemComponent
   ],
   templateUrl: './si-main-detail-container.html',
   styleUrl: './si-main-detail-container.scss',

From d30e151c6909e17314f191996c66c9874fc548b8 Mon Sep 17 00:00:00 2001
From: Maximilian Koeller <maximilian.koeller@siemens.com>
Date: Thu, 18 Jun 2026 20:00:32 +0200
Subject: [PATCH 2/4] fix: restore flex-grow-1 wrapper for
 main-detail-container layout

---
 .../si-main-detail-container/si-main-detail-container.html  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/examples/si-main-detail-container/si-main-detail-container.html b/src/app/examples/si-main-detail-container/si-main-detail-container.html
index 928a20a7e2..1f15eea300 100644
--- a/src/app/examples/si-main-detail-container/si-main-detail-container.html
+++ b/src/app/examples/si-main-detail-container/si-main-detail-container.html
@@ -1,5 +1,6 @@
-<si-main-detail-container
-  stateId="si-main-detail-demo"
+<div class="flex-grow-1">
+  <si-main-detail-container
+    stateId="si-main-detail-demo"
     [style.maxWidth.px]="containerMaxWidth ? containerMaxWidth : null"
     [largeLayoutBreakpoint]="largeLayoutBreakpoint"
     [heading]="heading"
@@ -75,6 +76,7 @@
       </div>
     </div>
 </si-main-detail-container>
+</div>
 
 <form class="e2e-ignore px-6 pb-6">
   <div class="card mt-4">

From 855ae95692238176aab4fae14e9f4fbe3dc00e5b Mon Sep 17 00:00:00 2001
From: Maximilian Koeller <maximilian.koeller@siemens.com>
Date: Thu, 18 Jun 2026 20:20:07 +0200
Subject: [PATCH 3/4] docs(main-detail-container): fix ngModel binding and
 restore flex layout

---
 .../si-main-detail-container-block.html                         | 2 +-
 .../si-main-detail-container/si-main-detail-container.ts        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/examples/si-main-detail-container/si-main-detail-container-block.html b/src/app/examples/si-main-detail-container/si-main-detail-container-block.html
index 763df6c659..88ad5b75f1 100644
--- a/src/app/examples/si-main-detail-container/si-main-detail-container-block.html
+++ b/src/app/examples/si-main-detail-container/si-main-detail-container-block.html
@@ -85,7 +85,7 @@
           class="form-check-input"
           id="customCheckMobileLayout"
           name="simulateMobileLayout"
-          [ngModel]
+          ngModel
           (ngModelChange)="toggleMobileLayout($event)"
         />
       </si-form-item>
diff --git a/src/app/examples/si-main-detail-container/si-main-detail-container.ts b/src/app/examples/si-main-detail-container/si-main-detail-container.ts
index 16dcac4434..1792cb4e4d 100644
--- a/src/app/examples/si-main-detail-container/si-main-detail-container.ts
+++ b/src/app/examples/si-main-detail-container/si-main-detail-container.ts
@@ -44,7 +44,7 @@ import { CorporateEmployee, DataService, PageRequest } from '../datatable/data.s
   providers: [DataService],
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
-    class: 'si-layout-fixed-height'
+    class: 'si-layout-fixed-height d-flex flex-column'
   }
 })
 export class SampleComponent {

From d87adbe011e688b89071a67a0b98845eb40069bc Mon Sep 17 00:00:00 2001
From: Maximilian Koeller <maximilian.koeller@siemens.com>
Date: Thu, 18 Jun 2026 20:21:10 +0200
Subject: [PATCH 4/4] docs(main-detail-container): revert unnecessary flex
 wrapper and fix indentation

---
 .../si-main-detail-container.spec.ts          |   2 +-
 ...r-element-examples-chromium-dark-linux.png |   4 +-
 ...-element-examples-chromium-light-linux.png |   4 +-
 ...l-container--si-main-detail-container.yaml |  14 +-
 .../si-main-detail-container-block.html       |  53 ++---
 .../si-main-detail-container.html             | 197 +++++++++---------
 .../si-main-detail-container.ts               |   2 +-
 7 files changed, 135 insertions(+), 141 deletions(-)

diff --git a/playwright/e2e/element-examples/si-main-detail-container.spec.ts b/playwright/e2e/element-examples/si-main-detail-container.spec.ts
index 628b3e5e87..c37a77e424 100644
--- a/playwright/e2e/element-examples/si-main-detail-container.spec.ts
+++ b/playwright/e2e/element-examples/si-main-detail-container.spec.ts
@@ -9,7 +9,7 @@ test.describe('si-main-detail-container', () => {
 
   test(example, async ({ page, si }) => {
     await si.visitExample(example);
-    await expect(page.getByText('Max Meier 8')).toHaveCount(1);
+    await expect(page.getByText('Max Meier 5')).toHaveCount(1);
     await si.runVisualAndA11yTests(undefined, {
       axeRulesSet: [{ id: 'scrollable-region-focusable', enabled: false }]
     });
diff --git a/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container-element-examples-chromium-dark-linux.png
index cd3bd53f99..5147f2d298 100644
--- a/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6075ef61268812087adefe2ba519087913ca7f242c9ed83a95bac38f5b74f92c
-size 40318
+oid sha256:446e9892ddc0bf76a51a77f41b1af41439037834b7dc3d34bf32f3e2e7e02b7e
+size 31781
diff --git a/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container-element-examples-chromium-light-linux.png b/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container-element-examples-chromium-light-linux.png
index 67a0e055fb..8d085b47bf 100644
--- a/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:75c0b03d9d5e35ecdf77f151611091bb9ef8e191018a3d26a0d9c00a6cbeccc9
-size 37212
+oid sha256:473c3c228eba6e46791f3a3eb94339ac19a1d9bc1a564bf2db4fb8cee0e5d9f3
+size 29659
diff --git a/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container.yaml b/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container.yaml
index a7b2b64835..6951b2f96b 100644
--- a/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container.yaml
+++ b/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container.yaml
@@ -36,18 +36,12 @@
       - cell "Max Meier 6"
       - cell "Engineer"
       - cell "Great Company 1"
-    - row "Max Meier 7 Installer Great Company 2":
-      - cell "Max Meier 7"
-      - cell "Installer"
-      - cell "Great Company 2"
-    - row "Max Meier 8 Engineer Great Company 3":
-      - cell "Max Meier 8"
-      - cell "Engineer"
-      - cell "Great Company 3"
 - text: Details
 - button "Toggle"
 - text: No entity selected.
-- checkbox "Resizable Parts" [checked]
-- text: Resizable Parts
+- separator
+- text: Settings
+- checkbox "Resizable parts" [checked]
+- text: Resizable parts
 - checkbox "Simulate mobile layout"
 - text: Simulate mobile layout
\ No newline at end of file
diff --git a/src/app/examples/si-main-detail-container/si-main-detail-container-block.html b/src/app/examples/si-main-detail-container/si-main-detail-container-block.html
index 88ad5b75f1..2489d3fe23 100644
--- a/src/app/examples/si-main-detail-container/si-main-detail-container-block.html
+++ b/src/app/examples/si-main-detail-container/si-main-detail-container-block.html
@@ -66,29 +66,32 @@
   </div>
 </si-main-detail-container>
 
-<form class="e2e-ignore px-6 pb-6">
-  <div class="card mt-4">
-    <div class="card-header">Settings</div>
-    <div class="card-body">
-      <si-form-item label="Resizable parts">
-        <input
-          type="checkbox"
-          class="form-check-input"
-          id="customCheckResizableParts"
-          name="resizableParts"
-          [(ngModel)]="resizableParts"
-        />
-      </si-form-item>
-      <si-form-item label="Simulate mobile layout">
-        <input
-          type="checkbox"
-          class="form-check-input"
-          id="customCheckMobileLayout"
-          name="simulateMobileLayout"
-          ngModel
-          (ngModelChange)="toggleMobileLayout($event)"
-        />
-      </si-form-item>
+<div class="e2e-ignore">
+  <hr />
+  <form class="px-6 px-md-9 pb-6 pt-5">
+    <div class="card">
+      <div class="card-header">Settings</div>
+      <div class="card-body">
+        <si-form-item label="Resizable parts">
+          <input
+            type="checkbox"
+            class="form-check-input"
+            id="customCheckResizableParts"
+            name="resizableParts"
+            [(ngModel)]="resizableParts"
+          />
+        </si-form-item>
+        <si-form-item label="Simulate mobile layout">
+          <input
+            type="checkbox"
+            class="form-check-input"
+            id="customCheckMobileLayout"
+            name="simulateMobileLayout"
+            ngModel
+            (ngModelChange)="toggleMobileLayout($event)"
+          />
+        </si-form-item>
+      </div>
     </div>
-  </div>
-</form>
+  </form>
+</div>
diff --git a/src/app/examples/si-main-detail-container/si-main-detail-container.html b/src/app/examples/si-main-detail-container/si-main-detail-container.html
index 1f15eea300..118f5e7b23 100644
--- a/src/app/examples/si-main-detail-container/si-main-detail-container.html
+++ b/src/app/examples/si-main-detail-container/si-main-detail-container.html
@@ -1,106 +1,103 @@
-<div class="flex-grow-1">
-  <si-main-detail-container
-    stateId="si-main-detail-demo"
-    [style.maxWidth.px]="containerMaxWidth ? containerMaxWidth : null"
-    [largeLayoutBreakpoint]="largeLayoutBreakpoint"
-    [heading]="heading"
-    [truncateHeading]="truncateHeading"
-    [detailsHeading]="detailsHeading"
-    [resizableParts]="resizableParts"
-    [hideBackButton]="false"
-    [mainContainerWidth]="50"
-    [minMainSize]="200"
-    [minDetailSize]="100"
-    [(detailsActive)]="detailsActive"
-    (hasLargeSizeChange)="isLarge = $event"
-    (mainContainerWidthChange)="onSplitChange($event)"
-  >
-    <si-search-bar
-      slot="mainSearch"
-      placeholder="Search"
-      (searchChange)="searchTermChanged($event)"
-    />
-    <si-content-action-bar
-      slot="mainActions"
-      viewType="collapsible"
-      [primaryActions]="mainActions"
-    />
+<si-main-detail-container
+  stateId="si-main-detail-demo"
+  [style.maxWidth.px]="containerMaxWidth ? containerMaxWidth : null"
+  [largeLayoutBreakpoint]="largeLayoutBreakpoint"
+  [heading]="heading"
+  [truncateHeading]="truncateHeading"
+  [detailsHeading]="detailsHeading"
+  [resizableParts]="resizableParts"
+  [hideBackButton]="false"
+  [mainContainerWidth]="50"
+  [minMainSize]="200"
+  [minDetailSize]="100"
+  [(detailsActive)]="detailsActive"
+  (hasLargeSizeChange)="isLarge = $event"
+  (mainContainerWidthChange)="onSplitChange($event)"
+>
+  <si-search-bar
+    slot="mainSearch"
+    placeholder="Search"
+    (searchChange)="searchTermChanged($event)"
+  />
+  <si-content-action-bar slot="mainActions" viewType="collapsible" [primaryActions]="mainActions" />
 
-    <ngx-datatable
-      #table
-      slot="mainData"
-      class="list-view table-element"
-      siDatatableInteraction
-      columnMode="force"
-      selectionType="single"
-      [cssClasses]="tableConfig.cssClasses"
-      [rows]="rows"
-      [columns]="[
-        { name: 'Name', sortable: false },
-        { name: 'Role', sortable: false },
-        { name: 'Company', sortable: false }
-      ]"
-      [reorderable]="false"
-      [headerHeight]="tableConfig.headerHeight"
-      [rowHeight]="tableConfig.rowHeightSmall"
-      [footerHeight]="0"
-      [ghostLoadingIndicator]="isLoading > 0"
-      [scrollbarV]="true"
-      [externalPaging]="true"
-      [externalSorting]="true"
-      [count]="totalElements"
-      [offset]="pageNumber"
-      [selected]="selectedEntities"
-      [datatableInteractionAutoSelect]="isLarge"
-      (page)="setPage($event)"
-      (select)="datatableOnSelect($event.selected)"
-    >
-      <si-empty-state empty-content icon="element-users" heading="No users to display" />
-    </ngx-datatable>
+  <ngx-datatable
+    #table
+    slot="mainData"
+    class="list-view table-element"
+    siDatatableInteraction
+    columnMode="force"
+    selectionType="single"
+    [cssClasses]="tableConfig.cssClasses"
+    [rows]="rows"
+    [columns]="[
+      { name: 'Name', sortable: false },
+      { name: 'Role', sortable: false },
+      { name: 'Company', sortable: false }
+    ]"
+    [reorderable]="false"
+    [headerHeight]="tableConfig.headerHeight"
+    [rowHeight]="tableConfig.rowHeightSmall"
+    [footerHeight]="0"
+    [ghostLoadingIndicator]="isLoading > 0"
+    [scrollbarV]="true"
+    [externalPaging]="true"
+    [externalSorting]="true"
+    [count]="totalElements"
+    [offset]="pageNumber"
+    [selected]="selectedEntities"
+    [datatableInteractionAutoSelect]="isLarge"
+    (page)="setPage($event)"
+    (select)="datatableOnSelect($event.selected)"
+  >
+    <si-empty-state empty-content icon="element-users" heading="No users to display" />
+  </ngx-datatable>
 
-    <!-- Detail (content slots: detailActions | details) -->
-    <!-- detailActions -->
-    <si-content-action-bar
-      slot="detailActions"
-      viewType="collapsible"
-      [primaryActions]="detailActions"
-    />
-    <!-- details -->
-    <div slot="details" class="card">
-      <div class="card-body overflow-auto pt-4">
-        @if (selectedEntity) {
-          {{ selectedEntity | json }}
-        } @else {
-          <div class="mx-auto text-center">No entity selected.</div>
-        }
-      </div>
+  <!-- Detail (content slots: detailActions | details) -->
+  <!-- detailActions -->
+  <si-content-action-bar
+    slot="detailActions"
+    viewType="collapsible"
+    [primaryActions]="detailActions"
+  />
+  <!-- details -->
+  <div slot="details" class="card">
+    <div class="card-body overflow-auto pt-4">
+      @if (selectedEntity) {
+        {{ selectedEntity | json }}
+      } @else {
+        <div class="mx-auto text-center">No entity selected.</div>
+      }
     </div>
+  </div>
 </si-main-detail-container>
-</div>
 
-<form class="e2e-ignore px-6 pb-6">
-  <div class="card mt-4">
-    <div class="card-header">Settings</div>
-    <div class="card-body">
-      <si-form-item label="Resizable parts">
-        <input
-          type="checkbox"
-          class="form-check-input"
-          id="customCheckResizableParts"
-          name="resizableParts"
-          [(ngModel)]="resizableParts"
-        />
-      </si-form-item>
-      <si-form-item label="Simulate mobile layout">
-        <input
-          type="checkbox"
-          class="form-check-input"
-          id="customCheckMobileLayout"
-          name="simulateMobileLayout"
-          ngModel
-          (ngModelChange)="toggleMobileLayout($event)"
-        />
-      </si-form-item>
+<div class="e2e-ignore">
+  <hr />
+  <form class="px-6 px-md-9 pb-6 pt-5">
+    <div class="card">
+      <div class="card-header">Settings</div>
+      <div class="card-body">
+        <si-form-item label="Resizable parts">
+          <input
+            type="checkbox"
+            class="form-check-input"
+            id="customCheckResizableParts"
+            name="resizableParts"
+            [(ngModel)]="resizableParts"
+          />
+        </si-form-item>
+        <si-form-item label="Simulate mobile layout">
+          <input
+            type="checkbox"
+            class="form-check-input"
+            id="customCheckMobileLayout"
+            name="simulateMobileLayout"
+            ngModel
+            (ngModelChange)="toggleMobileLayout($event)"
+          />
+        </si-form-item>
+      </div>
     </div>
-  </div>
-</form>
+  </form>
+</div>
diff --git a/src/app/examples/si-main-detail-container/si-main-detail-container.ts b/src/app/examples/si-main-detail-container/si-main-detail-container.ts
index 1792cb4e4d..16dcac4434 100644
--- a/src/app/examples/si-main-detail-container/si-main-detail-container.ts
+++ b/src/app/examples/si-main-detail-container/si-main-detail-container.ts
@@ -44,7 +44,7 @@ import { CorporateEmployee, DataService, PageRequest } from '../datatable/data.s
   providers: [DataService],
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
-    class: 'si-layout-fixed-height d-flex flex-column'
+    class: 'si-layout-fixed-height'
   }
 })
 export class SampleComponent {