BUGFIX: Prevent override of height for icons

[markusguenther]

The icons have multiple classes. From Font Awesome, we obtain the custom replacement class neos-svg-inline—fa, which sets a height of 1rem. However, we define the selectBoxHeaderWithSearchInput__icon class and set the height to 40px via a variable. The issue arises because the order in which these classes are applied determines the winning height. In Neos 8.4, the 40px height prevails, while in Neos 9.0, the 1rem height takes precedence. Consequently, the icons appear misaligned.

To address this issue, we implement an adjustment that ensures that when an element possesses both of these classes, the height of 40px from our custom class prevails.

Related: #3882

[markusguenther]

With the Upgrade in #3801 some Icons were misaligned.

Before:

After:

[markusguenther]

The acceptance tests for Firefox seem to be a bit wonky at the moment.

[mhsdesign]

Thanks for fixing this

And i tested it and the override works ... thanks! Now im wondering why this change is targeting 8.4 when the bug only appears in 9.0?

In Neos 8.4, the 40px height prevails, while in Neos 9.0, the 1rem height takes precedence.

In Neos 8.4 the class is indeed ordered differently in the build output:

.neos-svg-inline--fa{display:inline-block;font-size:inherit;height:1em;
.mAesQG_selectBoxHeaderWithSearchInput__icon{height:40px;width:1em}

Instead of neos-svg-inline--fa being last like in 9.0:

.mAesQG_selectBoxHeaderWithSearchInput__icon{height:40px;width:1em}
.neos-svg-inline--fa{display:var(--fa-display, inline-block);height:1em;

Also i noticed that the "width:1em" part is new with the font awesome upgrade too and wonder how that comes into play.

https://github.com/neos/neos-ui/pull/3801/files#diff-487adff98ba8cb5993634e088dd98a9904b1860ed6c58d4f788f1895822c5793

---

overall its pretty mean to have the styles somehow wind up in a different order than expected and i also expect that explains: #3882 and #3861
... maybe we can find out the reason for that?

[markusguenther]

Hi @mhsdesign

the neos-svg-inline--fa brings the height of 1rem and depending on the ordering of the classes the height comes from the neos-svg-inline--fa or the selectBoxHeaderWithSearchInput__icon class. I target 8.4 as the upgrade was intoduced here and when somehow the ordering changes, the bug will be the same.

So it is more prevention to make clear that our class will win :)

[pKallert]

Tested it out locally and looks fine

[Sebobo]

Cannot reproduce as previously mentioned by Marc, but ok 👍