Align compact activity bar chip size and spacing with top/bottom

[cipheraxat]

Fixes #325127

Summary

In Modern UI compact mode, the side activity bar's selected/hover chips were 28×28 with a larger radius, while the top/bottom activity bar uses 24×24 chips with cornerRadius-small. Item spacing was also off on the side because the vertical action bar uses display: inline-block, so CSS gap never applied.

This brings the compact side bar in line with top/bottom: 24×24 chips, matching radius, and a 4px gap between items.

Changes

In activityBar.css:

• Size compact active/hover indicators to 24×24 and center them in the 32px-wide bar
• Use cornerRadius-small (same as horizontal)
• Switch compact vertical .actions-container to a column flex layout so gap: 4px works
• Reset inherited bottom/margin on the active chip so it aligns with hover at top: 4px

Screenshots

Before — compact side (28×28, no gap)

Before — top (24×24 reference)

After — compact side (24×24, 4px gap)

After — top (unchanged)

Full workbench

Before:

After:

How to test

1. Enable "workbench.experimental.modernUI": true
2. Set Activity Bar location to Side and size to Compact (or the equivalent layout that yields the 32px-wide bar)
3. Confirm the selected/hover chip is the same size as when Activity Bar is Top / Bottom
4. Confirm spacing between icons matches the horizontal bar

[Copilot]

Pull request overview

Aligns compact side activity bar chips and spacing with top/bottom layouts.

Changes:

• Resizes active and hover chips to 24×24.
• Uses the control-tier radius and 4px item spacing.
• Enables vertical flex layout so spacing applies.