BUGFIX: Prevent override of height for icons

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: neos#3882

packages/react-ui-components/src/SelectBox_HeaderWithSearchInput/style.module.css

@@ -19,6 +19,14 @@
     }
 }
 
+/*
+    Prevent that the height is defined by neos-svg-inline--fa when it is on the same level
+    like the selectBoxHeaderWithSearchInput__icon
+*/
+:global(.neos-svg-inline--fa).selectBoxHeaderWithSearchInput__icon {
+    height: var(--spacing-GoldenUnit);
+}
+
 .selectBoxHeaderWithSearchInput__icon {
     composes: reset from '../reset.module.css';
     height: var(--spacing-GoldenUnit);