fix: set display: block on plugin icon pseudo-element (#13096)

[bvenreply]

What it does

Fixes #13096

Fix the icon pseudo-element being displayed as inline by default. This meant that the width and height properties were being ignored and the icons displayed with 0 width.

Also fix css syntax for width and height properties.

How to test

The most mainstream vscode extension I could reproduce the issue with was ms-kubernetes-tools. If you have no Kubernetes clusters, you can have one displayed using this dummy kubeconfig:

apiVersion: v1
kind: Config
current-context: dev
preferences: {}
clusters:
  - cluster:
      server: https://fake-k8s.com.local
    name: dev
users:
  - name: dev
    user:
      token: dummy
contexts:
  - name: dev
    context:
      cluster: dev
      user: dev

Just save it somewhere, then add it with the command Kubernetes: Set Kubeconfig.

Then just open the Kubernetes plugin view and note the no longer missing icon to the left of the cluster name.

I also found the issue reproduced in the gitlens plugin list of commits, here's a before/after comparison:

To reproduce this you can just install gitlens and open any git repository.

All this works on the Theia browser example.

Follow-ups

None that I can see.

Review checklist

• As an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

• As a reviewer, I agree to behave in accordance with the review guidelines

[planger]

Thanks, looks good to me! 👍