SLDS Icons appear oversized and overlapping

[Matej Mercina]

After updating to 2.3.0.1, I’ve noticed the SLDS icons are substantially oversized and consequentially often overlap. I don’t recall seeing this in the earlier versions.

[Scott Wells]

Hi. I'm not seeing that behavior locally:

Are you perhaps using a custom theme or something else that might change the way that things are presented in the IDE? Any configuration details you can provide that can help me to reproduce -- or at least characterize -- this are appreciated.

[Matej Mercina]

@Scott Wells certainly, I’ll try changing a few settings and report back when I get a chance.

[Matej Mercina]

My first thought was this could have something to do with font scaling I use at OS level, which i have set to 125%. However, changing it to 100% did nothing.

I went through Webstorm settings quickly and checked the Gutter Icons settings.

What’s interesting is, disabling “Show Gutter Icons” will definitely remove them, however removing the “SLDS Icon” as an option does nothing. What’s more, neither does removing all the others. The only way to make these dissapear is to completely disable the top level setting.

All the other gutter icons (Like the Run Test one) otherwise appear normally.

‌

[Scott Wells]

What theme are you using under Settings | Appearance & Behavior | Appearance? Do you have any third-party theming plugins like Material Theme installed and active? Also, can you confirm the version of the JetBrains IDE that you’re using? If it’s not the latest released version, can you please update to the latest released version and see if the problem is still present?

[Matej Mercina]

Turns out it was using custom font that triggers this…

But bizarrely, only setting the size above 17. Anything under is fine.

Before:

After:

‌

[Scott Wells]

Okay. Yeah, not sure. I just looked and it seems that the way I’m adding those icons, they should be scaled to 12x12 (standard gutter icon size) automatically for me. So I’m assuming that using such a font – I don’t know if it’s the font itself or the specified size – is causing that to go awry. I’d probably have to check with JetBrains on that one.

I may go ahead and explicitly resize the icon to 12x12 before handing it to the line marker decorator just to see if that resolves the issue since it seems to be happening only for these SLDS icons and not others which are presumably already 12x12. If I don’t see any issues doing that, such a change would be in the next build and you could try restoring that font/size.

[Matej Mercina]

Don’t waste much time on this, using 1 point smaller font is not a problem. Also I realized I can just disable gutter icons per-file.

The only thing that might be worth looking into is why the unselection of the “SLDS icon” under Gutter Icons doesn’t remove them. Honestly, while they’re nice to have, I really wouldn’t miss them :)

‌

[Scott Wells]

I’ve already committed a change to ensure the icon fits within the configured editor line height. That was very simple. I’m not seeing the other behavior either, though. Here it is enabled in an editor with multiple referenced icons:

‌

And here it is with those specific gutter icons disabled focused on the same editor lines:

‌

Can you confirm that you see that same behavior when you’re not using that custom font/size, or is it perhaps a side-effect of whatever is causing that issue?

[Matej Mercina]

Good point! And another curiosity…

When I apply the change to not include SLDS icons, nothing happens. Only after clicking save do the icons dissapear. The top level disable does correctly react to Apply however.

So, in summary - I recommend dropping this entirely, seems like a strange mix of OS + JetBrains IDE interacting unusually..

Here’s my IDE version BTW, forgot to add it earlier:

WebStorm 2023.3.4
Build #WS-233.14475.40, built on February 14, 2024

[Scott Wells]

Delivered in 2.3.0.2.