Forms: fix weird chrome only rendering issue

[AdrienClairembault]

No idea why this only happens on chrome, I had to inject a display: flex instruction into a specific select2 span for it to work.
Super hacky but I don't understand the issue at all, probably some chrome / select2 conflict.

Before:

After:

Q	A
Bug fix?	yes
New feature?	no
BC breaks?	no
Deprecations?	no
Tests pass?	yes
Fixed tickets

[cconard96]

I don't know why it happens in Chrome, but the issue is the flex styles for the selection template. Why not remove all the classes from the spans and just add a right margin to the icons?

diff --git a/src/Glpi/Form/QuestionType/QuestionTypesManager.php b/src/Glpi/Form/QuestionType/QuestionTypesManager.php
index 63766514e5..1245621d4d 100644
--- a/src/Glpi/Form/QuestionType/QuestionTypesManager.php
+++ b/src/Glpi/Form/QuestionType/QuestionTypesManager.php
@@ -177,8 +177,8 @@ final class QuestionTypesManager
         return <<<JS
             function(item) {
                 const icons = {$js_icons};
-                return $('<span class="d-flex flex-row-reverse align-items-center gap-2">'
-                    + '<i class="' + _.escape(icons[item.id]) + '"></i>'
+                return $('<span>'
+                    + '<i class="' + _.escape(icons[item.id]) + ' me-3"></i>'
                     + _.escape(item.text)
                     + '</span>');
             }
@@ -202,8 +202,8 @@ JS;
         return <<<JS
             function(item) {
                 const icons = {$js_icons};
-                return $('<span class="d-flex align-items-center gap-2">'
-                    + '<i class="' + _.escape(icons[item.id]) + '"></i>'
+                return $('<span>'
+                    + '<i class="' + _.escape(icons[item.id]) + ' me-3"></i>'
                     + _.escape(item.text)
                     + '</span>');
             }

[AdrienClairembault]

I don't know why it happens in Chrome, but the issue is the flex styles for the selection template. Why not remove all the classes from the spans and just add a right margin to the icons?

The flex in the icon ensure horizontal alignement with align-items-center.
Sadly without it the icon is misaligned with the text.

[cconard96]

If there is an alignment issue, it isn't noticeable.