Skip to content

Demo: full-width top toolbar + forward chatWelcomeSuggestions to sidebar/popup#455

Merged
blove merged 4 commits into
mainfrom
claude/fullwidth-toolbar-and-suggestions
May 19, 2026
Merged

Demo: full-width top toolbar + forward chatWelcomeSuggestions to sidebar/popup#455
blove merged 4 commits into
mainfrom
claude/fullwidth-toolbar-and-suggestions

Conversation

@blove
Copy link
Copy Markdown
Contributor

@blove blove commented May 19, 2026

Summary

User-visible:

  • Top toolbar is now full-width at the top of the page (was inset by the sidenav width). `.demo-shell` becomes flex-column: toolbar row + body row containing chat-sidenav + main.
  • Sidebar mode: the welcome suggestions now render INSIDE the chat-sidebar panel (was rendering in chat-sidebar's default content slot, outside the panel).
  • Popup mode: welcome suggestions now render INSIDE the chat-popup window (was being dropped entirely — chat-popup had no projection slot for them).
  • Close button on chat-sidebar no longer hidden behind the toolbar — chat-sidenav and chat-sidebar's panel are pushed down by the toolbar height via a CSS var (`--demo-toolbar-height`).
  • Sidebar page no longer overflows — chat-sidebar's host is dropped from layout via `display: contents` (its real chrome is position:fixed), and the default 100vh content slot is hidden in the demo (not used here).

Lib changes (additive):

  • `chat-sidebar` and `chat-popup` now forward the `chatWelcomeSuggestions` projection slot to the inner ``. Existing consumers unaffected; this just makes the slot reachable through both wrapper compositions.

@ngaf/* 0.0.41.

Test plan

  • `pnpm nx test chat` — green
  • `pnpm nx test examples-chat-angular` — 21 tests pass
  • Local chrome-mcp verify (`/sidebar`): toolbar full-width, sidenav top:51, panel top:51, close button t:59 clears toolbar.b:51, welcome-suggestions in panel (featured = "Demo: render a contact form"), pageOverflow: 0
  • Local chrome-mcp verify (`/popup`): welcome-suggestions inside the popup window
  • Canonical demo redeploys on demo.threadplane.ai

🤖 Generated with Claude Code

blove added 4 commits May 18, 2026 16:42
…nav height

Three fixes that together eliminate the /sidebar overflow + close-button
occlusion the user reported after PR #444's full-width toolbar landed:

1. chat-sidebar's only visible chrome is position: fixed (panel +
   launcher). Set its host to display: contents in sidebar-mode so it
   drops from the layout flow and doesn't stack below
   .sidebar-mode__background.

2. The chat-sidebar default content slot (.chat-sidebar__content) has
   min-height: 100vh — meant for push-mode consumers' page content.
   The demo doesn't use that slot; display: none on it here, so it
   doesn't add a second 100vh row to the demo's main column.

3. chat-sidenav's host has height: 100% plus position: fixed and
   bottom: 0. With our top: var(--demo-toolbar-height) override, the
   explicit height kept the sidenav at full viewport (extending
   ~51px past the bottom). Clamp it to
   calc(100% - var(--demo-toolbar-height)).
@vercel
Copy link
Copy Markdown

vercel Bot commented May 19, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
threadplane Ready Ready Preview, Comment May 19, 2026 3:59am

Request Review

@blove blove merged commit 4cdca77 into main May 19, 2026
18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant