[Alexandru Dima (alexdima)]

Fixes #315714

Problem

In the Agents window, the command center shows the session's folder name (and the branch for worktree sessions). When the name is too long to fit, it is cut off in the middle of a letter (…will-not-fit-in-the-titl) instead of ending with …. Nothing tells the user that the name was truncated.

Demo

The same scenario recorded twice, on the installed Insiders (BEFORE) and on this branch (AFTER):

315714-before-after-side-by-side.mp4

Cause

.agent-sessions-titlebar-workspace and .agent-sessions-titlebar-branch already have overflow: hidden; text-overflow: ellipsis, but they are also display: flex. text-overflow only applies to block containers. In a flex container the text sits in an anonymous flex item, so the label clips the text and draws no ellipsis.

before:  [icon] [ label: display:flex ── anonymous item "my-really-long…-titl|" ]  → clipped
after:   [icon] [ label: display:block "my-really-long…-the-t…"               ]  → ellipsis
          └──── parent group: display:flex; align-items:center (centers both) ────┘

Change

• sessionsTitleBarWidget.css: the two labels become display: block. I removed align-items: center and height: 100% because they only made sense for a flex label. The parent group is a flex container with align-items: center, so it still centers the labels vertically, and the regression test checks this. flex: 0 1 auto; min-width: 0 stay, so the labels still shrink.
• sessionsTitleBarWidget.test.ts: new test ellipsizes long workspace and branch names in the command center. It renders a long workspace name and a long branch name in a narrow command center, then checks that each label is display: block with text-overflow: ellipsis, that it actually overflows, and that it stays vertically centered.

How I tested

• ./scripts/test.sh --run src/vs/sessions/contrib/sessions/test/browser/sessionsTitleBarWidget.test.ts
  • With the fix: 25 passing.
  • Without the CSS change: 24 passing, 1 failing. The new test fails because the label is display: flex.
• pnpm run oxlint on the changed files: clean.
• UI scenario on Linux, 1280x800. Steps: open the Agents window, pick a folder named my-really-long-project-folder-name-that-will-not-fit-in-the-title, then check the title label.
  • Installed Insiders: T4 FAILED. "label is display:flex … text needs 503px, label is 365px". The name is cut mid-letter.
  • This branch (--dev): T4 PASSED. "label is display:block with text-overflow:ellipsis (text needs 503px, label is 365px)". The name ends with ….

I didn't record the branch label in a live session, because only worktree sessions show it. It uses the same CSS rule as the folder label, and the unit test covers both.

Related earlier changes to this widget: #309117, #339856, #337784, #348107.

Before / after

Before

315714-before.mp4

After

315714-after.mp4

🤖 Authored with GitHub Copilot on behalf of Alexandru Dima (@alexdima).

[Copilot]

🟢 Approval recommended

No active review issues block the workspace and branch label ellipsis fix.

No open issues 🎉

What changed in this PR

Fixes #315714 by making long workspace and worktree branch names end with an ellipsis rather than clipping mid-character in the Agents window command center.

Changes:

• Changes both labels from flex to block layout so ellipsis styling takes effect, while preserving shrinking and parent-controlled vertical alignment.
• Adds a regression test covering overflow, ellipsis styling, and vertical centering for both labels.

File	Description
src/​vs/​sessions/​contrib/​sessions/​test/​browser/​sessionsTitleBarWidget.test.ts	Adds narrow-layout coverage for long workspace and branch names.
src/​vs/​sessions/​contrib/​sessions/​browser/​media/​sessionsTitleBarWidget.css	Enables label ellipses and removes unnecessary flex-label styling.

_{Review effort: Balanced}