fix(chat): chat-sidenav host must be position:fixed so it doesn't push siblings#257
Merged
Merged
Conversation
…psed modes 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) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The new
<chat-sidenav>from #253 sets:host { display: block; height: 100% }and per-mode width on the inner.chat-sidenav(not the host). The host then stretches to the parent's full width (1800px on a 1080p viewport) and participates in document flow, pushing its sibling.demo-shell__main(router-outlet + chat) below the viewport.The demo shell uses
padding-left: 280pxon.demo-shell__main--pushto reserve space — a pattern that only works if the sidenav is positioned out of flow.Fix: put the host into
position: fixed; top: 0; left: 0; bottom: 0inexpandedandcollapsedmodes, and move the per-mode width from the inner.chat-sidenavonto the host (inner stays 100% wide). Drawer mode is unaffected (its inner.chat-sidenavis alreadyposition: fixed).Browser-verified at
localhost:4201/embedpost-fix:chat-sidenavhost:position: fixed, width 280px, left=0, top=0 ✓embed-mode: x=280, y=0, w=1520 (was y=930 → off-screen) ✓main: y=0 withpadding-left: 280px✓Test plan
npx vitest run chat-sidenav— existing 10 tests passnpx nx lint chat— cleannpx nx build examples-chat-angular— succeedshttp://localhost:4201/embed— chat content visible to the right of the 280px sidenav, not pushed off-screen.🤖 Generated with Claude Code