Status bar items do not preserve whitespace between codicons

Extracted from https://github.com/microsoft/vscode/issues/145722

If you bring up a status bar entry with 2 codicons next to each other only separated by whitespace, the 2 icons are still rendered as if there was no white space:

HTML is:

<a tabindex="-1" role="button" aria-label="label" class="disabled"><span class="codicon codicon-mark-github"></span> <span class="codicon codicon-mark-github"></span></a>

Code:

const statusService = accessor.get(IStatusbarService);

statusService.addEntry({
	name: 'name',
	ariaLabel: 'label',
	text: '$(mark-github) $(mark-github)',
}, 'my.id', StatusbarAlignment.LEFT);

I traced this down to the fact that the parent anchor tag of a status item uses display: flex and this seems to collapse whitespace elements, as outlined in e.g. https://www.mattstobbs.com/flexbox-removing-trailing-whitespace/

However, we already set white-space: pre as suggested:

https://github.com/microsoft/vscode/blob/0140fba8bb128d7481a4bcd380de774ab1210c5d/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css#L118

Opening up for help for a CSS wizard to look at. Ideally all whitespaces between 2 codicons are preserved for styling purposes.

//cc @daviddossett @misolori @joaomoreno

[bpasero]

Yeah I think that would work at the place where we build the HTML elements, but I wouldn’t suggest to force extension devs to use it.

[bpasero]

gap seems to stretch every status bar item then:

This is really very specific to the fact that there is whitespace between the span, everything else is proper. I think gap will cause other regressions.