Skip to content

sessions: fix Customizations single-entry width overflow#315125

Merged
joshspicer merged 1 commit intomainfrom
sessions/fix-customizations-single-entry-outline
May 8, 2026
Merged

sessions: fix Customizations single-entry width overflow#315125
joshspicer merged 1 commit intomainfrom
sessions/fix-customizations-single-entry-outline

Conversation

@joshspicer
Copy link
Copy Markdown
Member

What

Fixes the keyboard-focus outline on the single-entry "Customizations" sidebar button being misaligned — extending past the panel's right edge.

Before After
Outline overflows the panel (visible 20px past the right edge) Outline hugs the button, matching the per-section items

Why

In single-entry mode, .ai-customization-toolbar.single-entry .customization-link-button-container had width: 100% set, which combined with the inherited margin: 0 10px from the base rule (line 84) to lay out the container at parent.width + 20px. The button inside also had width: 100%, so it inherited the overflow. The focus outline traces the button's actual bounding box, making the overflow immediately visible whenever the button received keyboard focus.

Fix

Drop the explicit width: 100% declarations. The flex-column toolbar's default align-items: stretch plus the inherited margin: 0 10px already size the container correctly — the same way the per-section link rows are sized. flex: none is kept so the entry doesn't stretch vertically inside the column.

Testing

CSS-only change; verified hygiene passes. Component fixture in aiCustomizationShortcutsWidget.fixture.ts (ModeSingle*) covers this layout.

The single-entry sidebar 'Customizations' button had `width: 100%` set on
both the link-button container and the inner button. Combined with the
inherited `margin: 0 10px` from the per-section rule, this overflowed the
panel by 20px and was visible as a misaligned focus outline that extended
past the panel edge.

Drop the explicit widths and let the parent's default `align-items: stretch`
plus the inherited margins size the entry, matching the per-section items.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot AI review requested due to automatic review settings May 7, 2026 22:08
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 the Agents window “Customizations” sidebar button in single-entry mode so its keyboard focus outline no longer overflows the panel width.

Changes:

  • Removed single-entry width: 100% overrides that, combined with margin: 0 10px, caused the container/button to layout wider than the parent.
  • Updated the inline comment to clarify that width is handled by inherited margins and default flex stretching, while keeping flex: none to prevent vertical stretching.
Show a summary per file
File Description
src/vs/sessions/contrib/sessions/browser/media/customizationsToolbar.css Removes single-entry width overrides that caused horizontal overflow; keeps flex: none and clarifies sizing rationale.

Copilot's findings

  • Files reviewed: 1/1 changed files
  • Comments generated: 0

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 7, 2026

Screenshot Changes

Base: 5f26198f Current: 98aa6b16

Changed (2)

sessions/aiCustomizationShortcutsWidget/ModeSingle/Dark
Before After
before after
sessions/aiCustomizationShortcutsWidget/ModeSingle/Light
Before After
before after

@joshspicer joshspicer enabled auto-merge (squash) May 7, 2026 22:14
@joshspicer joshspicer merged commit 0c161d3 into main May 8, 2026
44 of 45 checks passed
@joshspicer joshspicer deleted the sessions/fix-customizations-single-entry-outline branch May 8, 2026 17:25
@vs-code-engineering vs-code-engineering Bot added this to the 1.120.0 milestone May 8, 2026
wpfleger96 added a commit to wpfleger96/vscode that referenced this pull request May 8, 2026
…2-not-clearing-terminal-title

* upstream/main:
  chat: hide plugin actions for synced customization items (microsoft#315320)
  fixes microsoft#291188 (microsoft#314713)
  sessions: restore last active session on reload (microsoft#315312)
  Replace "Agents app" with "Agents window" in user-facing strings (microsoft#315302)
  chat: remove 'Bridged' badge from MCP servers in AI Customizations UI (microsoft#315319)
  Add proposal for custom editor diff/merge priority
  agentHost: revert undefined-field omission, update tests instead
  sessions: fix Customizations single-entry width overflow (microsoft#315125)
  agentHost: rewrite Resource attachments and omit undefined fields
  agentHost: support image and blob user-message attachments
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.

3 participants