Remove text label from Add Context button in chat input, show only centered paperclip icon

[Copilot]

Summary

Successfully modified the 'Add Context' button in VS Code's chat input to remove the text label and show only the paperclip icon as requested.

Changes Made

• Modified AddFilesButton class in src/vs/workbench/contrib/chat/browser/chatInputPart.ts:

  • Changed constructor options from icon: false, label: true to icon: true, label: false
  • Removed the updateLabel() method that was manually rendering icon + text
  • Fixed unused imports (renderLabelWithIcons, assertType)

• Updated CSS styling in src/vs/workbench/contrib/chat/browser/media/chat.css:

  • Fixed icon centering by targeting the correct DOM element (.action-label)
  • Used flexbox with align-items: center and justify-content: center on the label element
  • Added !important declarations to override conflicting styles
  • Updated dimensions to 20x20px to match the visual height of attached context items
  • Resolved box-sizing differences between attach button and attached context items
  • Kept the chip-like border styling as requested

• Preserved functionality and accessibility:

  • Button still uses the same action ID (workbench.action.chat.attachContext)
  • Tooltip and aria-label remain unchanged ("Add Context..." + keyboard shortcut)
  • Keyboard shortcut (Ctrl/Cmd + /) still works
  • Button functionality is completely preserved

Technical Details

• TypeScript compilation: ✅ 0 errors
• Security scan (CodeQL): ✅ No issues found
• Icon is now properly centered both vertically and horizontally
• Height alignment fixed: Button now matches the visual height of attached context items
• Resolved CSS conflicts from existing .action-item.chat-attachment-button .action-label rule
• Fixed box-sizing mismatch that caused height differences

Visual Result

The button now appears as a clean 20x20px square with:

• Paperclip icon (Codicon.attach) perfectly centered both vertically and horizontally
• Properly aligned with attached context items - same visual height
• Chip-like border matching other attachment tokens
• Same hover tooltip showing "Add Context..." with keyboard shortcut
• Consistent spacing that allows attached context items to shift left, making room for more files

The changes address both the centering and height alignment issues while preserving all existing functionality.

Created from VS Code via the GitHub Pull Request extension.

Created from VS Code via the GitHub Pull Request extension.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[eli-w-king]

@copilot the paperclip icon is not centered in the button, everything else looks and works great!

---

[Copilot]

@copilot the paperclip icon is not centered in the button, everything else looks and works great!

--- ...

Fixed the icon centering issue in commit 6df1207. The problem was that the CSS was targeting the wrong DOM element - it needed to target the .action-label element rather than the container. The icon is now properly centered both vertically and horizontally using flexbox alignment properties and overrides the conflicting padding from existing CSS rules.

[eli-w-king]

@copilot now the heights of the attach button and attached context are misaligned. the height of the square button should match the height of attached context. they should remain alinged, the size of the attach button must increase

---

[Copilot]

@copilot now the heights of the attach button and attached context are misaligned. the height of the square button should match the height of attached context. they should remain alinged, the size of ...

Fixed the height alignment issue in commit e6280ec. The problem was a box-sizing mismatch - the attached context items use the default content-box sizing (18px content + 2px borders = 20px total), while my button was using border-box sizing (18px total including borders). Increased the button size to 20x20px to match the attached context items' visual height.