Responsive: drawer breakpoint, header/footer padding symmetry, panel top alignment#480
Open
blove wants to merge 8 commits into
Open
Responsive: drawer breakpoint, header/footer padding symmetry, panel top alignment#480blove wants to merge 8 commits into
blove wants to merge 8 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…modal*) so it stays above drawer Search palette was at z 51/50 — below drawer (1001), toolbar (50), interrupt-panel (999), subagents (997). Opening the palette while the drawer was open swallowed every click through to the drawer underneath. Adds --ngaf-chat-z-modal-scrim: 1100 and --ngaf-chat-z-modal: 1101 to LAYER_TOKENS. Palette scrim + dialog use those tokens. Palette now sits cleanly above drawer / toolbar / notifications at all viewport widths.
At <320px viewports the chat-welcome-suggestion host's default display:inline-block sized to button content (~220px wide), overflowing the .welcome-suggestions__featured wrapper that flex-shrank to ~180px. overflow:hidden on the wrapper then clipped the button right edge. Fix demo-side via ::ng-deep: force chat-welcome-suggestion host to display:block + width:100% so it follows the wrapper's flex-shrunk width. Label inside ellipsizes correctly. Also adds 12px horizontal padding on the welcome-suggestions host so the row doesn't overflow viewport edges on the smallest screens.
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
Four small fixes that surfaced when testing the chat library at intermediate viewport widths:
Drawer-mode breakpoint 1024 → 768. Tablet widths (768–1023) now keep an expanded sidenav instead of collapsing into a drawer overlay. Drawer mode is reserved for true mobile (<768px). Also updates the matching `@media (max-width: 1023px)` rule on `.demo-shell__main` to `max-width: 767px`.
`drawerOpen` defaults to false; no longer persists. Drawer is now a transient UI state — every fresh load starts with the drawer closed. Drops both the persistence read on init and the write on toggle.
chat-window body matches input-gap padding-top when the header slot is empty. New lib CSS rule `.chat-window__header:empty + .chat-window__body { padding-top: var(--ngaf-chat-input-gap) }`. When a consumer doesn't project a header (the common case), the chat content sits with equivalent breathing room at top and bottom instead of crashing into viewport-y 0.
chat-sidebar panel top:0 instead of toolbar-offset. The panel's close button now sits at viewport-y 8 (`panel-header padding-top: 8`), matching the demo toolbar's hamburger at viewport-y 8 (`toolbar padding-top: 8`). Both top controls live in the same horizontal band. chat-sidenav stays under the toolbar — it's a different surface that lives on the left edge.
@ngaf/* 0.0.45.
Test plan
🤖 Generated with Claude Code