From 8e1397489450ee324a345de431207f3731be0bab Mon Sep 17 00:00:00 2001 From: Brian Love Date: Tue, 12 May 2026 09:37:37 -0700 Subject: [PATCH] fix(chat): chat-sidenav host must be position:fixed in expanded/collapsed modes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The host element was display:block + position:static, so it stretched to the parent's full width and pushed sibling content out of flow. In the demo shell — which uses padding-left:280px on .demo-shell__main to reserve space — this dropped the chat below the viewport. Make the host position:fixed (with the right width per mode) in expanded and collapsed modes, so it sits beside main content without displacing it. Drawer mode is unaffected (the inner .chat-sidenav is already fixed). Move the per-mode width from the inner .chat-sidenav to the host so the fixed host has the correct size; the inner aside stays at 100%. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../src/lib/styles/chat-sidenav.styles.ts | 25 +++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/libs/chat/src/lib/styles/chat-sidenav.styles.ts b/libs/chat/src/lib/styles/chat-sidenav.styles.ts index b193ff75..a6757a3b 100644 --- a/libs/chat/src/lib/styles/chat-sidenav.styles.ts +++ b/libs/chat/src/lib/styles/chat-sidenav.styles.ts @@ -1,16 +1,37 @@ // libs/chat/src/lib/styles/chat-sidenav.styles.ts // SPDX-License-Identifier: MIT export const CHAT_SIDENAV_STYLES = ` + /* + * In expanded / collapsed modes the sidenav is "always visible" beside the + * main content — the consumer reserves space with padding-left on the + * layout container. The host must be position: fixed so it doesn't + * participate in document flow; otherwise its display: block stretches + * to the parent's full width and pushes siblings below the viewport. + */ :host { display: block; height: 100%; } - :host([data-mode="expanded"]) .chat-sidenav { + :host([data-mode="expanded"]), + :host([data-mode="collapsed"]) { + position: fixed; + top: 0; + left: 0; + bottom: 0; + z-index: 100; + } + :host([data-mode="expanded"]) { width: var(--ngaf-chat-sidenav-width-expanded); } - :host([data-mode="collapsed"]) .chat-sidenav { + :host([data-mode="collapsed"]) { width: var(--ngaf-chat-sidenav-width-collapsed); } + :host([data-mode="expanded"]) .chat-sidenav { + width: 100%; + } + :host([data-mode="collapsed"]) .chat-sidenav { + width: 100%; + } :host([data-mode="drawer"]) { position: relative; }