Vscode: Circle badges in trees look off-centered vertically

[c5inco]

Issue Type: Bug

The vertical centering of the circles look off when inline with text in the trees. This is more notable in certain themes, such as Universe and Night Owl (extensions), and Visual Studio Dark.

VS Code version: Code 1.32.3 (a3db5be9b5c6ba46bb7555ec5d60178ecc2eaae4, 2019-03-14T22:46:48.547Z)
OS version: Darwin x64 18.2.0

System Info

|Item|Value|
|---|---|
|CPUs|Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz (8 x 2700)|
|GPU Status|2d_canvas: enabled
checker_imaging: disabled_off
flash_3d: enabled
flash_stage3d: enabled
flash_stage3d_baseline: enabled
gpu_compositing: enabled
multiple_raster_threads: enabled_on
native_gpu_memory_buffers: enabled
rasterization: enabled
surface_synchronization: enabled_on
video_decode: enabled
webgl: enabled
webgl2: enabled|
|Load (avg)|3, 3, 3|
|Memory (System)|16.00GB (0.99GB free)|
|Process Argv||
|Screen Reader|no|
|VM|0%|

Extensions (12)

Extension|Author (truncated)|Version
---|---|---
dart-code|Dar|2.25.0
flutter|Dar|2.25.0
vscode-eslint|dba|1.8.2
vscode-babel-coloring|dza|0.0.4
tslint|eg2|1.0.43
prettier-vscode|esb|1.8.1
Kotlin|mat|1.7.0
node-debug2|ms-|1.33.0
debugger-for-chrome|msj|4.11.3
polacode|pnp|0.2.2
language-stylus|sys|1.11.0
sort-lines|Tyr|1.8.0

(13 theme extensions excluded)

[c5inco]

😅 @misolori @joaomoreno @bpasero

[joaomoreno]

[misolori]

The height of the rows were being bumped up by 1px, which caused them to look a bit stretched. Circle badges in the scm tree should now look the same as the rest of our badges.

[c5inco]

Ah so this was only for badges in SCM trees?

[misolori]

Yea, only in that multi-root view with the split pane. We do also have weird alignment (~1px) in all of our badges due to their percentage/em sizing in a 22px row:

https://github.com/Microsoft/vscode/blob/5260a601f95bb5b2f87cd46daebd25aea00fee08/src/vs/base/browser/ui/countBadge/countBadge.css#L6-L9

[misolori]

@c5inco as I'm re-reading this, I'm wondering if you meant that the badges were off-center inside of the row or inside of the badge? Or both? 😄

[c5inco]

Both really - it sorta looked like an egg with the yolk gravitating towards the bottom. 😄

[misolori]

😄 This should fix that then

[alexr00]

I'm verifying and I see that the number inside the badge looks more centered, but the badge itself still looks to be a bit closer to the bottom of the row. I think that's what @misolori is referring to here though, and isn't intended to be fixed by this.

[misolori]

@alexr00 thanks for verifying, and yes this is just for the badge shape itself and not the position of it.