elements icon indicating copy to clipboard operation
elements copied to clipboard

fix: align button height with Monaco metrics

Open dankeboy36 opened this issue 2 months ago • 0 comments

  • aligns the button's height with Monaco by using line-height: 18px; (same as VS Code's .monaco-text-button, see https://github.com/microsoft/vscode/blob/91b31240fb8a0afcbff105d69cd7fee7af9dd23f/src/vs/base/browser/ui/button/button.css#L17).
  • mirrors Monaco's 4px vertical padding so the box model sums to ~27.8px, while letting button groups add their 1px divider offset via --vsc-base-additional-right-padding (falls back to 0 elsewhere).
  • Keep icon-only and empty buttons at the same height by retaining Monaco's 4px top/bottom padding and a 26px min-width for glyph-only controls (see https://github.com/microsoft/vscode/blob/91b31240fb8a0afcbff105d69cd7fee7af9dd23f/src/vs/base/browser/ui/button/button.css#L10).

Closes: vscode-elements/elements#554

Before: Screenshot 2025-11-08 at 15 05 07

After: Screenshot 2025-11-08 at 15 12 34

Screenshot 2025-11-08 at 15 00 25 Screenshot 2025-11-08 at 15 01 06

dankeboy36 avatar Nov 08 '25 14:11 dankeboy36