From ae573efae4670b641f3b24958bc43baa45aa2a5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Grabowski?= <michal.grabowski@ibexa.co>
Date: Thu, 2 Nov 2023 16:01:57 +0100
Subject: [PATCH] IBX-6955: Filters in global search are misaligned for long
 content type name

---
 src/bundle/Resources/public/scss/_filters.scss         |  3 +++
 .../scss/ui/modules/universal-discovery/_filters.scss  | 10 ++++++++++
 .../views/themes/admin/ui/form_fields.html.twig        |  2 +-
 .../components/collapsible/collapsible.js              |  7 ++++++-
 .../content-type-selector/content.type.selector.js     |  2 ++
 5 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/bundle/Resources/public/scss/_filters.scss b/src/bundle/Resources/public/scss/_filters.scss
index 5c54a83d17..826f5f6ebb 100644
--- a/src/bundle/Resources/public/scss/_filters.scss
+++ b/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;
         }
     }
 
diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_filters.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_filters.scss
index 7a489546fd..3cff3be9d1 100644
--- a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_filters.scss
+++ b/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);
         }
diff --git a/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig b/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig
index 0a55a1172b..cf5bfeea36 100644
--- a/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig
+++ b/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 -%}
 
diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/collapsible/collapsible.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/collapsible/collapsible.js
index 55d9fccf20..be4f682c19 100644
--- a/src/bundle/ui-dev/src/modules/universal-discovery/components/collapsible/collapsible.js
+++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/collapsible/collapsible.js
@@ -2,6 +2,8 @@ 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({
@@ -9,9 +11,12 @@ const Collapsible = ({ isInitiallyExpanded, title, children }) => {
         '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>
diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/content-type-selector/content.type.selector.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/content-type-selector/content.type.selector.js
index 6764525abf..2402cccbb5 100644
--- a/src/bundle/ui-dev/src/modules/universal-discovery/components/content-type-selector/content.type.selector.js
+++ b/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>