MS Team icon text is missing white space when plugins are icons are in collapsed list

[DHaussermann]

When MS teams calling is enabled along with several others, there is missing white space between the plugin icon and title

[DHaussermann]

@larkox or @hanzei do either of you know if this is in-fact an issue that must be addressed in each plugin repo individually?
As you can can see, 2 other plugins are also affected.

[larkox]

I wonder if there has been any changes in the CSS. What I think is happening here is that SVGs are being treated different as font-icon in terms of spacing. Not 100% sure if where should we fix those.

[larkox]

In order to have proper styling, the elements must have the "icon" class. We can solve this in two different ways:

• Set the icon class in each plugin, and any new plugin.
• Set the icon class at the parent element in the webapp code, and update the plugins that use the icon class already, so it is not applied twice.

Thoughts?

[hanzei]

Option 2. seems like the right way to me. Plugins shouldn't rely on some CSS class that the webapp uses.

[lieut-data]

Agree with @hanzei that we would ideally not be brittle in depending on CSS classes, but I admit that ship has probably long since sailed. Can we do "both" somehow, by having the plugin conditionally add the icon class if it intends to support older Mattermost server versions? It would be a shame for new versions of a plugin to appear broken for months until the changes in the webapp get into production.

[larkox]

If we were to do both, we would have to change "all the plugins". Is it something we want to do?

For short term I will just add the icon class to MSTeams, and if we agree on a long term solution, we can file the needed tickets both in the main product and each of the plugins.

[lieut-data]

@larkox, could we only change the plugins that "use the icon class already", as proposed in Option 2? Effectively allowing those plugins to continue to support older webapp versions than the one in which this class fix will ship?