From 3a50ca697efc566e3277eac4543cccfa213b9f21 Mon Sep 17 00:00:00 2001
From: Aleksandra Mickiewicz <aleksandra.mickiewicz@ibexa.co>
Date: Mon, 20 Oct 2025 11:38:27 +0200
Subject: [PATCH 1/2] IBX-10575: Fixed dropdown alignment

---
 src/bundle/Resources/public/scss/_dropdown.scss | 10 ++++++----
 .../ui/component/dropdown/dropdown.html.twig    | 17 +++++++++++------
 .../dropdown/dropdown_selected_item.html.twig   |  4 +++-
 .../src/modules/common/dropdown/dropdown.js     |  2 +-
 4 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/bundle/Resources/public/scss/_dropdown.scss b/src/bundle/Resources/public/scss/_dropdown.scss
index 2c353682b9..9896cf36c3 100644
--- a/src/bundle/Resources/public/scss/_dropdown.scss
+++ b/src/bundle/Resources/public/scss/_dropdown.scss
@@ -109,13 +109,15 @@
         padding-top: 0;
         padding-bottom: 0;
         margin-right: calculateRem(8px);
-        display: inline-block;
         max-width: calculateRem(380px);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
         transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
 
+        &-label {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
         &--has-icon {
             border-radius: 0;
         }
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig
index 6ed7168765..2b7babaafc 100644
--- a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig
@@ -48,7 +48,9 @@
     <div class="ibexa-dropdown__wrapper">
         {% set placeholder_list_item %}
             <li class="ibexa-dropdown__selected-item ibexa-dropdown__selected-item--predefined ibexa-dropdown__selected-placeholder">
-                {{ 'dropdown.placeholder.empty'|trans|desc("No options available") }}
+                <span class="ibexa-dropdown__selected-item-label">
+                    {{ 'dropdown.placeholder.empty'|trans|desc("No options available") }}
+                </span
             </li>
         {% endset %}
         <ul
@@ -111,11 +113,14 @@
                         class="ibexa-dropdown__selected-item ibexa-dropdown__selected-item--predefined ibexa-dropdown__selected-placeholder"
                         {% if value is empty %}hidden{% endif %}
                     >
-                        {% if placeholder is defined and placeholder is not none %}
-                            {{ _self.get_translated_label(placeholder, translation_domain )}}
-                        {% else %}
-                            {{ 'dropdown.placeholder'|trans|desc("Choose an option") }}
-                        {% endif %}
+                        <span class="ibexa-dropdown__selected-item-label">
+                            {% if placeholder is defined and placeholder is not none %}
+                                {{ _self.get_translated_label(placeholder, translation_domain )}}
+                            {% else %}
+                                {{ 'dropdown.placeholder'|trans|desc("Choose an option") }}
+                            {% endif %}
+                        </span>
+
                     </li>
                 {% endif %}
             {% endif %}
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_selected_item.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_selected_item.html.twig
index e0c6d21a05..e0c2a38a67 100644
--- a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_selected_item.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_selected_item.html.twig
@@ -7,6 +7,8 @@
             {{ include('@ibexadesign/ui/component/dropdown/dropdown_selected_item_icon.html.twig', { icon }) }}
         {% endif %}
     </span>
-    {{ label }}
+    <span class="ibexa-dropdown__selected-item-label">
+        {{ label }}
+    </span>
     <span class="ibexa-dropdown__remove-selection"></span>
 </li>
diff --git a/src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js b/src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js
index 0574594838..d95e9de9e2 100644
--- a/src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js
+++ b/src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js
@@ -170,7 +170,7 @@ const Dropdown = ({
     const renderSelectedMultipleItem = (item) => {
         return (
             <li key={item.value} className="ibexa-dropdown__selected-item">
-                {item.label}
+                <span className="ibexa-dropdown__selected-item-label">{item.label}</span>
                 <span className="ibexa-dropdown__remove-selection" onClick={() => onChange(item.value)} />
             </li>
         );

From b6cc0bc2baec05cfd89aac7b36934c65db6ad61a Mon Sep 17 00:00:00 2001
From: Aleksandra Mickiewicz <aleksandra.mickiewicz@ibexa.co>
Date: Fri, 24 Oct 2025 13:41:25 +0200
Subject: [PATCH 2/2] Fixed readability

---
 src/bundle/Resources/public/scss/_dropdown.scss      | 12 ++++++------
 .../admin/ui/component/dropdown/dropdown.html.twig   |  3 +--
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/bundle/Resources/public/scss/_dropdown.scss b/src/bundle/Resources/public/scss/_dropdown.scss
index 9896cf36c3..dabe32511a 100644
--- a/src/bundle/Resources/public/scss/_dropdown.scss
+++ b/src/bundle/Resources/public/scss/_dropdown.scss
@@ -112,12 +112,6 @@
         max-width: calculateRem(380px);
         transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
 
-        &-label {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
         &--has-icon {
             border-radius: 0;
         }
@@ -160,6 +154,12 @@
         }
     }
 
+    &__selected-item-label {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
     &__selection-toggler-btn {
         display: flex;
         margin: calculateRem(8px) calculateRem(21px) 0;
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig
index 2b7babaafc..82ca32d3f9 100644
--- a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig
@@ -50,7 +50,7 @@
             <li class="ibexa-dropdown__selected-item ibexa-dropdown__selected-item--predefined ibexa-dropdown__selected-placeholder">
                 <span class="ibexa-dropdown__selected-item-label">
                     {{ 'dropdown.placeholder.empty'|trans|desc("No options available") }}
-                </span
+                </span>
             </li>
         {% endset %}
         <ul
@@ -120,7 +120,6 @@
                                 {{ 'dropdown.placeholder'|trans|desc("Choose an option") }}
                             {% endif %}
                         </span>
-
                     </li>
                 {% endif %}
             {% endif %}