Sync icon rotation is uneven (it is wobbling)

[zeroskyx]

Greetings,

currently, the sync icon in the bottom bar is not rotating evenly (it is actually wobbling).
The effect can be seen here:

Before.webm

This is caused since the used text icon is not centered properly. The effect has been reproduced on both Windows and Linux versions of VSCode.

• VS Code Version: 1.90.1

Steps to Reproduce:

1. Open a project with a remote git repository attached
2. Click on the sync icon in the bottom bar
3. Observe the wobbling icon

[bpasero]

Yes, I also have seen this a lot of times!

[bpasero]

fyi @joaomoreno

[Ghady-Abboud]

First time contributor here, is it cool if I work on it?

[bpasero]

Sure, anyone can. But I would think the fix should be in the icon itself, not some CSS rule.

[Ghady-Abboud]

Ubuntu 22.0.4 on WSL2(Windows 10)
Vscode version 1.90.1

I can't reproduce the error, I see no wobbling

milkcrate-backend.TestResolver.-.Code.-.OSS.Dev.Ubuntu.2025-02-16.17-52-03.online-video-cutter.com.mp4

[roblourens]

Was just looking at this and I think it's because the padding is not balanced. It has padding-left: 2px here https://github.com/microsoft/vscode/blob/main/src/vs/workbench/contrib/notebook/browser/media/notebookToolbar.css#L66 all other sides are 3px

But we shouldn't naively change that to 3 and change the spacing of all items. Maybe can make it spin inside the padding instead of spinning the padding. Or just change the padding for rotating elements. cc @rebornix

[bpasero]

@roblourens but that would not explain why the icon looks off in the status bar, or does it? The CSS rule seems scoped to notebooks?

[roblourens]

Sorry for the noise, I just noticed this in a notebook and was looking around for an issue and didn't even notice that we're talking about a totally different sync icon here...

Opened #243027