chore(compass-assistant): fix content overflow and resizing of drawer COMPASS-9882 COMPASS-9883 COMPASS-9888 #7373
Conversation
| ), | ||
| clearChat: () => { | ||
| clearChat: async () => { | ||
| await chat.stop(); |
There was a problem hiding this comment.
drive-by, we do not want to continue streaming after clearing
gagik
force-pushed
the
gagik/bugbash-fixes
branch
from
5595f71 to
d15d664
Compare
There was a problem hiding this comment.
Pull Request Overview
Fixes content overflow and resizing issues in the MongoDB Assistant drawer by implementing container queries and responsive scaling, along with minor styling improvements.
- Added container query support to the drawer portal to enable responsive behavior
- Implemented text wrapping and overflow fixes for the assistant chat interface
- Added responsive title scaling when the drawer becomes narrow
- Made the clearChat function asynchronous to properly handle chat stopping
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/compass-components/src/components/drawer-portal.tsx | Added container type for inline-size queries |
| packages/compass-assistant/src/components/assistant-chat.tsx | Fixed text overflow with width and word-break properties, removed trailing dot |
| packages/compass-assistant/src/compass-assistant-provider.tsx | Made clearChat async and added chat.stop() call |
| packages/compass-assistant/src/compass-assistant-drawer.tsx | Added responsive title scaling with container queries |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
gagik
changed the title
| // Shrink the title text and badge when the drawer is narrow | ||
| '@container (width < 320px)': { | ||
| '&': { | ||
| transform: 'scale(0.8) translateX(-10%)', |
There was a problem hiding this comment.
I should note that translate -10% is a bit of a hack but at least it's relative to content
| flexDirection: 'column-reverse', | ||
| overflowY: 'auto', | ||
| width: '100%', | ||
| wordBreak: 'break-word', |
There was a problem hiding this comment.
I'm wondering if we should move this to much more targeted elements so that we don't have to turn it off again on things one by one as we find them. Like make sure it is only message text and code blocks?
There was a problem hiding this comment.
I think it's one of the things that's actually better applied globally and then we set exceptions accordingly. In most cases we'd prefer breaking instead of overflowing with a scrollbar for example
|
Going to go ahead with merge but if we run into further issues with |
2 participants
chore: remove dot
fix overflowing and centered: use break-word and width: 100 COMPASS-9882 COMPASS-9883
chore: scale down the title when making the drawer narrow
chore: clear error on chat clear COMPASS-9888