Topics tagged with `info` have strange appearance

AI-generated summary

The discussion revolves around a visual issue with topics tagged as info on a Discourse 2.4.0.beta10 instance. fkohrt noticed the issue and provided screenshots comparing the strange appearance to the regular look. jomaxro suspected it might be related to select-kit 2, but joffreyjaffeux confirmed it was not.

joffreyjaffeux identified the issue as a .tag-info CSS selector defined in tagging.scss, which was generating a tag-info class on elements when a tag named “info” was present. He created a pull request to fix the issue by making the selector more specific: https://github.com/discourse/discourse/pull/8902.

A few days ago I noticed that on our Discourse 2.4.0.beta10 (bd49d4af1a) instance single topics look strange, even with safe mode enabled:

Compare this to a regular look:

The topics all have in common that they are tagged with info. This also corresponds with a different appearance of the tag page:

Again, compare this with a “regular” look:

The /logs are as follows:

Do you have any idea what might be going on here?

Any chance this is sk2 @j.jaffeux? I can repro it on try adding the info tag.

No it’s not related to select-kit 2, but it’s impacting select-kit. It appears we have a .tag-info css selector defined in tagging.scss and if you have a tag named info we end up generating a tag-info class on various elements (and select-kit/tag-drop is part of these elements).

I made the selector more specific and that should fix it:

https://github.com/discourse/discourse/pull/8902