Fix Improve vertical alignment of text and icons in status bar #162995

[chaitanyamedidar]

Fix vertical alignment of text and icons in status bar

Description

This PR fixes the vertical alignment of text and icons in the status bar by applying a subtle optical adjustment to compensate for asymmetric font metrics across different platforms.

Fixes #162995

Changes

Modified src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css:

• Added transform: translateY(-1px) to .statusbar-item-label to shift text up by 1px for better optical centering
• Added transform: translateY(1px) to .statusbar-item-label > span.codicon to counter-adjust icons, keeping them in their original centered position
• Added explicit line-height: 1 to .statusbar-item span.codicon for consistent icon sizing

Problem

Text and icons in the status bar were not perfectly aligned vertically. The text appeared slightly below the optical center of the 22px status bar due to asymmetric vertical spacing in system fonts (e.g., Segoe UI on Windows, San Francisco on macOS). This misalignment was subtle (approximately 1-2px) but noticeable, particularly at default zoom levels as reported by @bpasero.

Solution

Applied a global 1px transform adjustment:

• The entire label container shifts up 1px, moving text toward optical center
• Codicons are counter-adjusted down 1px to maintain their flexbox-centered position
• Net result: text moves up, icons stay in place, creating better optical alignment

The fix is applied globally across all platforms (Windows, macOS, Linux) rather than platform-specific, as the issue was reported on multiple platforms.

Testing

Tested

Before:

After:

Windows 11 with Segoe UI font - verified improved alignment using DevTools

Needs Verification

• ⚠️ macOS (where @bpasero originally reported the issue with zoom level 1)
• ⚠️ Linux

How to Test

1. Open VS Code with this branch
2. Look at the status bar at the bottom
3. Focus on items with both icons and text (e.g., git branch with icon, warnings/errors with counts)
4. Use browser DevTools (Help → Toggle Developer Tools) to inspect the status bar
5. Add a horizontal guide at the vertical center to check alignment
6. Compare with main branch - text should appear more centered with icons

Note: The difference is subtle (1px) and may require zooming in or adding visual guides to see clearly. The improvement is most noticeable on systems where font metrics cause the most asymmetry.

Implementation Notes

• The fix uses CSS transform instead of padding/margin to avoid affecting layout calculations
• Applied globally rather than platform-specific to simplify implementation
• If platform-specific adjustments are needed based on testing feedback, I'm happy to refine the approach

@bpasero Please review the draft, Thank you.

[Copilot]

Pull request overview

This PR addresses a subtle visual alignment issue in the status bar where text appears slightly below the optical center due to asymmetric font metrics across platforms. The fix applies a 1-pixel vertical translation to improve the optical alignment of text while keeping icons centered.

Key Changes:

• Applied transform: translateY(-1px) to status bar item labels to shift text upward
• Counter-adjusted codicons with transform: translateY(1px) to maintain their centered position
• Added explicit line-height: 1 to codicons for consistent 1:1 aspect ratio

[bpasero]

This looks risky and fragile, but I want to give @mrleemurray a chance to chime in on this.

[chaitanyamedidar]

Technical Breakdown: Status Bar Vertical Alignment Fix

The Status Bar is using display: flex and align-items: center, which mathematically aligns all elements to the center. However, fonts like Segoe UI and San Francisco reserve invisible space for ascenders and descenders, causing text to appear visually lower than the center even when mathematically aligned.

To resolve this, I implemented a solution using transform and line-height.

My Solution: transform + line-height

1. transform: translateY(-1px) on the Label

• Its Purpose It moves the text up by 1 pixel at the compositor level.
• Safety: It does not trigger a layout recalculation (reflow). It does not change the height of the status bar. It does not affect the position of neighboring items. It is purely visual.
• Fragility: Low. It is an integer pixel shift, which renders cleanly on all screens (no sub-pixel blurring).

2. transform: translateY(1px) on the Icon (Counter-Adjustment)

• Purpose Since the icon is inside the label, moving the label up moves the icon up as well. We apply an equal and opposite force to the icon to keep it perfectly vertically centered in the bar.
• Result: The text moves up (fixing the alignment), but the icon stays locked in the center.

3. line-height: 1 on Icons

• Purpose Icon fonts often inherit the line-height of the text, which adds invisible leading (spacing) above and below the icon, making it impossible to center reliably.
• Safety: Forcing line-height: 1 ensures the icon's bounding box matches its visual size, removing any ghost spacing.

Why other alternatives are not the best:

• padding-bottom / margin-top: These affect the Box Model. They would increase the height of the status bar or cause items to shift, potentially breaking the layout of the entire workbench bottom panel.
• vertical-align: Does not work reliably in a Flexbox context for this specific sub-pixel tuning.
• position: relative; top: -1px: Similar to transform, but can sometimes trigger layout operations depending on the browser engine. transform is more performant.

I would really appreciate feedback on my approach.

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.