Skip to content

sessions: align new chat picker typography - #334307

Merged
Megan Rogge (meganrogge) merged 3 commits into
mainfrom
agents/fix-vscode-issue-333887
Sep 3, 2026
Merged

sessions: align new chat picker typography#334307
Megan Rogge (meganrogge) merged 3 commits into
mainfrom
agents/fix-vscode-issue-333887

Conversation

@meganrogge

Copy link
Copy Markdown
Collaborator

Fixes #333887

Summary

  • align new-session pill labels with the body text role
  • use base-size leading icons in pills and their picker menus
  • move picker padding and compact chevrons onto shared design tokens
  • extend the component fixture visual expectation to cover the typography consistency

Validation

  • npm run hygiene
  • ESLint on the changed TypeScript files
  • Stylelint on chatWidget.css
  • npm run transpile-client
  • focused picker unit tests: 101 passing
  • component fixture inspection: both pills compute to 13px text, 16px leading icons, 24px minimum height, and 2px/12px padding

npm run compile was also attempted. The changed Sessions sources compiled, but the command currently fails in the unrelated Markdown editor extension because the installed @vscode/markdown-editor API lacks IframeEmbeddedEditorHostTransport and iframeBootstrapUrl.

Copilot AI balanced review requested due to automatic review settings September 3, 2026 16:38

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Copilot review overview

🟡 Changes recommended

The default non-consolidated tabbed workspace picker does not receive the new icon-sizing class.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Review tier: Balanced
Findings: 1 Medium severity

New issues introduced by this change (1)
Severity Finding
Medium severity src/​vs/​sessions/​contrib/​chat/​browser/​sessionWorkspacePicker.ts — The new class does not reach the default non-consolidated tabbed workspace picker. When multiple…
What changed in this PR

Aligns new-session picker typography, icon sizing, spacing, and visual expectations.

Changes:

  • Uses body typography and design-system spacing tokens for picker pills.
  • Standardizes picker icons and compact chevrons.
  • Extends fixture expectations for typography consistency.
File Description
newChatWidget.fixture.ts Updates visual expectations.
sessionWorkspacePicker.ts Adds workspace-list styling scope.
sessionTypePicker.ts Adds session-type-list styling scope.
chatWidget.css Aligns typography, icons, and spacing.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread src/vs/sessions/contrib/chat/browser/sessionWorkspacePicker.ts

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Approved after current-head Copilot Code Review and GPT Luna found no security issue in the full PR patch.

Use consistent body text, base icon sizing, and tokenized spacing across new-session pills and their dropdowns. Fixes #333887.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@github-actions

github-actions Bot commented Sep 3, 2026

Copy link
Copy Markdown
Contributor

Screenshot Changes

Base: 4e7455b0 Current: 0a81e3f9

Changed (34)

sessions/chat/newWidget/newChatWidget/NewSessionDefault/Dark
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionDefault/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionAutoModel/Dark
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionAutoModel/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionCompactAutoModel/Dark
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionCompactAutoModel/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionWorkspacePicker/Dark
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionWorkspacePicker/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionGitHubContextPicker/Dark
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionGitHubContextPicker/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionAttachedContext/Dark
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionAttachedContext/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionPhoneAttachedContext/Dark
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionPhoneAttachedContext/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionRemoteWorkspace/Dark
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionRemoteWorkspace/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionNarrow/Dark
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionNarrow/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionComments/Dark
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionComments/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionTip/Dark
Before After
before after
sessions/chat/newWidget/newChatWidget/NewSessionTip/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/PromptOptionsLoading/Dark
Before After
before after
sessions/chat/newWidget/newChatWidget/PromptOptionsLoading/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/PromptOptionsStandard/Dark
Before After
before after
sessions/chat/newWidget/newChatWidget/PromptOptionsStandard/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/PromptOptionsGitHubMixed/Dark
Before After
before after
sessions/chat/newWidget/newChatWidget/PromptOptionsGitHubMixed/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/PromptOptionsSelected/Dark
Before After
before after
sessions/chat/newWidget/newChatWidget/PromptOptionsSelected/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/PromptOptionsEditedDisabled/Dark
Before After
before after
sessions/chat/newWidget/newChatWidget/PromptOptionsEditedDisabled/Light
Before After
before after
sessions/chat/newWidget/newChatWidget/PromptOptionsNarrow/Dark
Before After
before after
sessions/chat/newWidget/newChatWidget/PromptOptionsNarrow/Light
Before After
before after

Errored (8)

Fixtures that failed to render — no screenshot was produced.

sessions/remoteHostUnavailable/remoteHostUnavailableEmptyState/HostNotRunning/Dark — unknown error (no image hash produced)
unknown error (no image hash produced)
sessions/remoteHostUnavailable/remoteHostUnavailableEmptyState/HostNotRunning/Light — unknown error (no image hash produced)
unknown error (no image hash produced)
sessions/remoteHostUnavailable/remoteHostUnavailableEmptyState/HostNotRunningAutoStart/Dark — unknown error (no image hash produced)
unknown error (no image hash produced)
sessions/remoteHostUnavailable/remoteHostUnavailableEmptyState/HostNotRunningAutoStart/Light — unknown error (no image hash produced)
unknown error (no image hash produced)
sessions/remoteHostUnavailable/remoteHostUnavailableEmptyState/HostDisconnected/Dark — unknown error (no image hash produced)
unknown error (no image hash produced)
sessions/remoteHostUnavailable/remoteHostUnavailableEmptyState/HostDisconnected/Light — unknown error (no image hash produced)
unknown error (no image hash produced)
sessions/remoteHostUnavailable/remoteHostUnavailableEmptyState/Connecting/Dark — unknown error (no image hash produced)
unknown error (no image hash produced)
sessions/remoteHostUnavailable/remoteHostUnavailableEmptyState/Connecting/Light — unknown error (no image hash produced)
unknown error (no image hash produced)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 8d31eaa8-0167-4e21-9b96-54e229afb71e
@meganrogge
Megan Rogge (meganrogge) merged commit 6afe58b into main Sep 3, 2026
40 of 61 checks passed
@meganrogge
Megan Rogge (meganrogge) deleted the agents/fix-vscode-issue-333887 branch September 3, 2026 19:34
@vs-code-engineering vs-code-engineering Bot added this to the 1.137.0 milestone Sep 3, 2026
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.

Font sizes on new chat page

6 participants