From a2791c05b9d07fc79b451480fb88231a1380ffdf Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 18 May 2026 21:05:30 -0700
Subject: [PATCH] feat(demo): enable pushContent on sidebar mode so panel
 pushes content left

---
 .../src/app/modes/sidebar-mode.component.ts   | 37 ++++++++++---------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/examples/chat/angular/src/app/modes/sidebar-mode.component.ts b/examples/chat/angular/src/app/modes/sidebar-mode.component.ts
index ffa16666..9eca02fd 100644
--- a/examples/chat/angular/src/app/modes/sidebar-mode.component.ts
+++ b/examples/chat/angular/src/app/modes/sidebar-mode.component.ts
@@ -11,44 +11,47 @@ import { WelcomeSuggestionsComponent } from './welcome-suggestions.component';
   imports: [ChatSidebarComponent, WelcomeSuggestionsComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="sidebar-mode__background">
-      <p class="sidebar-mode__hint">
-        Use the launcher (right edge) to dismiss or re-open the chat panel.
-      </p>
-    </div>
     <chat-sidebar
       [agent]="agent"
       [views]="catalog"
       [modelOptions]="shell.modelOptions()"
       [selectedModel]="shell.model()"
       [open]="true"
+      [pushContent]="true"
       (selectedModelChange)="shell.onModelChange($event)"
       (replayRequested)="shell.onTimelineReplay($event)"
       (forkRequested)="shell.onTimelineFork($event)"
     >
+      <div class="sidebar-mode__background">
+        <p class="sidebar-mode__hint">
+          Use the launcher (right edge) to dismiss or re-open the chat panel.
+        </p>
+      </div>
       <welcome-suggestions chatWelcomeSuggestions (selected)="send($event)" />
     </chat-sidebar>
   `,
   styles: [`
-    /* chat-sidebar's visible chrome is position: fixed (panel + launcher),
-     * so its host element doesn't need to take layout space. Use
-     * display: contents on the host to drop it from the flow, and let
-     * the sibling .sidebar-mode__background fill the visible area. */
     :host { display: block; flex: 1; min-height: 0; position: relative; }
+    /* Projected into chat-sidebar's default content slot so [pushContent]
+     * applies its right-margin push to this background when the panel
+     * opens. Sized to fill the visible area below the toolbar. */
     .sidebar-mode__background {
       display: grid;
       place-items: center;
-      height: 100%;
+      min-height: calc(100dvh - var(--demo-toolbar-height, 51px));
       color: #8a92a3;
       font-size: 14px;
     }
-    :host ::ng-deep > chat-sidebar { display: contents; }
-    /* The chat-sidebar default content slot (.chat-sidebar__content) is
-     * meant for the consumer's page content when chat-sidebar is in
-     * push mode. The demo uses .sidebar-mode__background instead, so
-     * hide the default content slot — its min-height: 100vh would
-     * otherwise stack below the background and overflow the page. */
-    :host ::ng-deep .chat-sidebar__content { display: none; }
+    /* chat-sidebar's default content slot sets min-height: 100vh which,
+     * combined with the demo's flex column, would otherwise overflow the
+     * page. The background div above provides the visible "page" so we
+     * cap the chat-sidebar__content height to the available space. */
+    :host ::ng-deep .chat-sidebar__content {
+      /* Important: lib sets min-height: 100vh on this slot which would
+       * push the page 51px below the viewport in our flex column under
+       * the 51px toolbar. Override here. */
+      min-height: 0 !important;
+    }
   `],
 })
 export class SidebarMode {