sessions: scope chat "card style" to chat panel and chat editor only#318712
Merged
ulugbekna merged 1 commit intoMay 28, 2026
Conversation
The rules at `.agent-sessions-workbench .interactive-session .interactive-item-container`, `> .chat-suggest-next-widget`, and `.interactive-input-part` used to apply to every chat surface inside the Agents window. That includes surfaces that reuse the chat widget components but do not want the 950px-wide centered "card" layout notably the terminal inline chat (Ctrl/Cmd+I in terminal), the editor inline chat (Ctrl/Cmd+I in an editor), and the agent-session hover widget. In those surfaces the items got centered with a 950px max-width which left empty space on the left and overflowed on the right. Scope the three rules to `.part.sessionspart` and `.chat-editor-relative`, the two surfaces that actually want the card layout. With the narrowed needed (no competing rules at the target selectors) and have been removed. Verified via CDP-injected test DOM against the running Agents window: - `.part.sessionspart` -> max-width 950px, auto-centered (preserved) - `.chat-editor-relative` -> max-width 950px, auto-centered (preserved) - `.terminal-inline-chat` -> max-width none, margin 0 (fixed) - `.zone-widget.inline-chat-widget` -> max-width none, margin 0 (fixed) - `.agent-session-hover` -> max-width none, margin 0 (fixed) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR narrows three chat layout CSS rules in the Agents window stylesheet so the 950px "card style" only applies to the chat panel and chat editor host, instead of leaking into every chat surface (terminal inline chat, editor inline chat, agent-session hover widget) that reuses the shared chat widget classes.
Changes:
- Scope
.interactive-item-containerand.chat-suggest-next-widgetcard rules to.part.sessionspartand.chat-editor-relative. - Scope
.interactive-input-partcard rule the same way, also fixing the terminal inline chat layout bug. - Drop now-unneeded
!importantmarkers on padding/margin/display since the narrowed selectors no longer compete with other rules (keeping!importantonly on the editor-background transparency rule).
Show a summary per file
| File | Description |
|---|---|
| src/vs/sessions/browser/media/style.css | Narrow three card-layout rules to chat panel / chat editor host selectors and remove redundant !important markers. |
Copilot's findings
- Files reviewed: 1/1 changed files
- Comments generated: 0
sandy081
approved these changes
May 28, 2026
sandy081
approved these changes
May 28, 2026
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
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.
Problem
In the Agents window, the terminal inline chat (
Ctrl/Cmd+Iin the terminal) was visually broken: chat content boxes were shifted right with a large empty area on the left and the right side overflowed past the terminal panel.Root cause: three rules in
sessions/browser/media/style.csstargeted.agent-sessions-workbench .interactive-session ...(selectors.interactive-item-container,> .chat-suggest-next-widget, and.interactive-input-part) and applied a 950px-wide centered "card" layout. These rules were intended for the chat panel and chat editor surfaces, but they also matched every other chat surface that reuses the chat widget components — notably:Ctrl/Cmd+Iin any editor open in the Agents window — the Agents window has a fully functional editor area).padding: 0was being silently overridden by the rule's!important12px padding).Before
After
Fix
Narrow the three rules at the source to only target
.part.sessionspart(chat panel —sessionsPart.ts:109) and.chat-editor-relative(chat editor host —chatEditor.ts:97).Also dropped the now-unnecessary
!importantmarkers on padding/margin/display: with the narrowed scope there are no competing rules at the targeted selectors, so the markers were already redundant. (The!importantonbackground-color: transparentfor the inner monaco-editor inside.interactive-input-partis unchanged — that one really does need to override the editor's own background.)Verification
Verified via CDP-injected test DOM against the running Agents window. Computed styles after the fix:
max-widthmargin.part.sessionspart(chat panel)950px.chat-editor-relative(chat editor)950px.terminal-inline-chat(terminal inline chat)none0.zone-widget.inline-chat-widget(editor inline chat)none0.agent-session-hover(hover widget)none0Notes for reviewers
workbench/contrib/terminalContrib/chat/browser/media/terminalChatWidget.css, but two subagent reviewers flagged it as wrong-layer (inverts the workbench → sessions dependency) and as fixing only the symptom (the editor inline chat and hover widget have the same leak). Moving the fix to the source addresses all three surfaces in one change.mobileChatShell.css:248-256already use!importantto re-relaxmax-widthon phone — those still work because phone's.phone-layoutselectors have equal or higher specificity than the (now narrower) source rules.