IBX-6955: Filters in global search are misaligned for long content type name

Author: GrabowskiM

src/bundle/Resources/public/scss/_filters.scss

@@ -53,6 +53,9 @@
             color: $ibexa-color-dark;
             margin-top: calculateRem(16px);
             margin-bottom: calculateRem(4px);
+            width: 100%;
+            text-overflow: ellipsis;
+            overflow: hidden;
         }
     }
 

src/bundle/Resources/public/scss/ui/modules/universal-discovery/_filters.scss

@@ -128,6 +128,16 @@
     &__collapsible-list-item {
         padding: calculateRem(6px) 0;
 
+        .form-check {
+            width: 100%;
+        }
+
+        .form-check-label {
+            width: 100%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
         .ibexa-input--checkbox {
             margin-right: calculateRem(8px);
         }

src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig

@@ -129,7 +129,7 @@
 
 {%- block search_type_choice_widget_options -%}
     <li class="ibexa-content-type-selector__item">
-        {{ form_widget(form[choice.value], {'attr': {'data-name': choice.label}, 'label_attr': {'class': 'checkbox-inline'}}) }}
+        {{ form_widget(form[choice.value], {'attr': {'data-name': choice.label}, 'label_attr': {'class': 'checkbox-inline', 'title': choice.label }}) }}
     </li>
 {%- endblock -%}
 

src/bundle/ui-dev/src/modules/universal-discovery/components/collapsible/collapsible.js

@@ -2,16 +2,21 @@ import React, { useState } from 'react';
 
 import { createCssClassNames } from '../../../common/helpers/css.class.names';
 
+const { ibexa } = window;
+
 const Collapsible = ({ isInitiallyExpanded, title, children }) => {
     const [isExpanded, setIsExpanded] = useState(isInitiallyExpanded);
     const className = createCssClassNames({
         'c-filters__collapsible': true,
         'c-filters__collapsible--hidden': !isExpanded,
     });
     const toggleCollapsed = () => setIsExpanded((prevState) => !prevState);
+    const initTooltipsRef = (node) => {
+        ibexa.helpers.tooltips.parse(node);
+    };
 
     return (
-        <div className={className}>
+        <div className={className} ref={initTooltipsRef}>
             <div className="c-filters__collapsible-title" onClick={toggleCollapsed}>
                 {title}
             </div>

src/bundle/ui-dev/src/modules/universal-discovery/components/content-type-selector/content.type.selector.js

@@ -56,6 +56,8 @@ const ContentTypeSelector = () => {
                                             <label
                                                 className="checkbox-inline form-check-label"
                                                 htmlFor={`ibexa-search-content-type-${contentType.identifier}`}
+                                                title={contentType.name}
+                                                data-tooltip-container-selector=".c-udw-tab"
                                             >
                                                 {contentType.name}
                                             </label>