Skip to content

style: fix button dropdown styles in chat plan review container#311341

Draft
DonJayamanne wants to merge 1 commit intomainfrom
don/zestful-hookworm
Draft

style: fix button dropdown styles in chat plan review container#311341
DonJayamanne wants to merge 1 commit intomainfrom
don/zestful-hookworm

Conversation

@DonJayamanne
Copy link
Copy Markdown
Contributor

Fixes #311327

Copilot AI review requested due to automatic review settings April 20, 2026 09:44
@DonJayamanne DonJayamanne self-assigned this Apr 20, 2026
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Fixes inconsistent heights between segments of monaco-button-dropdown buttons in the chat plan review UI (both the collapsed inline actions and the footer actions), aligning them with the 22px button height used elsewhere in chat widgets.

Changes:

  • Set a consistent height: 22px on .monaco-button-dropdown in the plan review inline-actions and footer.
  • Adjust dropdown segment padding/box sizing and remove separator padding to keep the segments visually aligned.
Show a summary per file
File Description
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatPlanReview.css Normalizes dropdown button segment sizing in the plan review container (inline actions + footer).

Copilot's findings

Comments suppressed due to low confidence (1)

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatPlanReview.css:257

  • This duplicates the .monaco-button-dropdown styling block used for the title inline-actions above. Consider grouping the selectors (inline-actions + footer) into a shared rule to reduce duplication and the risk of the two locations drifting over time.
.interactive-session .chat-plan-review-container .chat-plan-review-footer .monaco-button-dropdown {
	width: auto;
	height: 22px;
	align-items: stretch;
}

.interactive-session .chat-plan-review-container .chat-plan-review-footer .monaco-button-dropdown > .monaco-button.monaco-dropdown-button {
	padding: 0 4px;
	box-sizing: border-box;
}

.interactive-session .chat-plan-review-container .chat-plan-review-footer .monaco-button-dropdown > .monaco-button-dropdown-separator {
	padding: 0;
}
  • Files reviewed: 1/1 changed files
  • Comments generated: 1

Comment on lines 139 to +151
.interactive-session .chat-plan-review-container .chat-plan-review-inline-actions .monaco-button-dropdown {
width: auto;
height: 22px;
align-items: stretch;
}

.interactive-session .chat-plan-review-container .chat-plan-review-inline-actions .monaco-button-dropdown > .monaco-button.monaco-dropdown-button {
padding: 0 4px;
box-sizing: border-box;
}

.interactive-session .chat-plan-review-container .chat-plan-review-inline-actions .monaco-button-dropdown > .monaco-button-dropdown-separator {
padding: 0;
Copy link

Copilot AI Apr 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The .monaco-button-dropdown rules for inline actions and footer are identical (height/align-items + dropdown-button + separator). Consider consolidating these selectors into a single rule (e.g. grouping both containers) to avoid style drift between the two locations. Also, align-items: stretch is the default for flex containers, so it can likely be omitted if not needed for an override.

This issue also appears on line 244 of the same file.

Copilot uses AI. Check for mistakes.
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.

Button segment height inconsistent

2 participants