fix: terminal progress display overflow

[arnavnagzirkar]

Summary

When the terminal panel is moved to the right side, the single-terminal-tab action item (showing the terminal icon + title + progress) is rendered in the panel's title bar action bar.

Root cause

When the terminal panel is moved to the right side, the single-terminal-tab action item (showing the terminal icon + title + progress) is rendered in the panel's title bar action bar. The parent actions-container uses justify-content: flex-end (via .pane-composite-part > .title.has-composite-bar > .title-actions .monaco-action-bar .actions-container), meaning items are right-aligned.

With the action item using flex: 0 1 auto (the CSS default), it is sized at its content width (which can be very long when progress content is included in the terminal label). When positioned at the right end of the container, the wide item overflows to the left, past the container boundary. Because no ancestor container has overflow: hidden, this left overflow is fully visible - the label protrudes over the composite bar (panel tab buttons), causing the display overflow.

What changed

File: src/vs/workbench/contrib/terminal/browser/media/terminal.css

Three changes:

1. Added .monaco-action-bar .action-item:has(> .single-terminal-tab) rule with:

• flex: 1 - makes the item grow to fill available space instead of sizing to content width, eliminating the overflow
• min-width: 0 - allows the item to shrink below content size
• overflow: hidden - clips item content when constrained

2. Added overflow: hidden and min-width: 0 to .monaco-action-bar .action-item .single-terminal-tab so the label element itself also clips its flex content (icons + text).

With flex: 1, the single-terminal-tab item fills available space from the left; there is no free space remaining for justify-content: flex-end to cause a left overflow. Long progress content is clipped by overflow: hidden at the allocated width.

Issue

Fixes #312970

Issue: #312970

Diffstat

.../contrib/terminal/browser/media/terminal.css | 9 ++++++
 .../contrib/terminal/browser/terminalInstance.ts | 2 +-
 .../terminal/test/browser/terminalInstance.test.ts | 33 +++++++++++++++++++++-
 3 files changed, 42 insertions(+), 2 deletions(-)

Testing

• Ran the relevant tests and linter for the changed files while developing.

• Kept the change minimal and focused on this one issue.

AI assistance

I used GitHub Copilot to help write parts of this change. I've reviewed and tested it myself, I understand what it does, and I'll follow up on any review feedback.

[vs-code-engineering]

📬 CODENOTIFY

The following users are being notified based on files changed in this PR:

@anthonykim1

Matched files:

• src/vs/workbench/contrib/terminal/browser/media/terminal.css
• src/vs/workbench/contrib/terminal/browser/terminalInstance.ts
• src/vs/workbench/contrib/terminal/test/browser/terminalInstance.test.ts