From 0fba13ed0f166934d6eec3364d36630d4828ea6a Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Tue, 20 Jun 2023 08:19:58 +0000
Subject: [PATCH] [FIX] web: search panel: long filter on mobile

Prior to this commit, when a filter or a dropdown item had a long name,
the layout was broken on mobile, the item went out of the viewport and
wasn't readable.

This commit fixes this issue.

task-3378207
Part of task-3326263

closes odoo/odoo#126071

X-original-commit: 96d1edcdba78af3572c3395867e561c0eb3d5054
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
---
 .../custom_favorite_item.xml                     |  2 +-
 .../custom_group_by_item.xml                     |  4 ++--
 .../search/search_bar_menu/search_bar_menu.xml   | 16 ++++++++--------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/addons/web/static/src/search/custom_favorite_item/custom_favorite_item.xml b/addons/web/static/src/search/custom_favorite_item/custom_favorite_item.xml
index 1471272e83f..8744c2986ea 100644
--- a/addons/web/static/src/search/custom_favorite_item/custom_favorite_item.xml
+++ b/addons/web/static/src/search/custom_favorite_item/custom_favorite_item.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.CustomFavoriteItem" owl="1" >
-        <AccordionItem class="'o_add_favorite'" description="'Save current search'">
+        <AccordionItem class="'o_add_favorite text-truncate'" description="'Save current search'">
             <div class="px-3 py-2">
                 <input type="text"
                     class="o_input"
diff --git a/addons/web/static/src/search/custom_group_by_item/custom_group_by_item.xml b/addons/web/static/src/search/custom_group_by_item/custom_group_by_item.xml
index fb3b5770b61..17c7462ac7b 100644
--- a/addons/web/static/src/search/custom_group_by_item/custom_group_by_item.xml
+++ b/addons/web/static/src/search/custom_group_by_item/custom_group_by_item.xml
@@ -1,9 +1,9 @@
 <templates xml:space="preserve">
 
     <t t-name="web.CustomGroupByItem" owl="1">
-        <AccordionItem class="'o_add_custom_group_menu'" description="'Add Custom Group'">
+        <AccordionItem class="'o_add_custom_group_menu text-truncate'" description="'Add Custom Group'">
             <div class="px-3 py-2">
-                <select class="o_input" t-model="state.fieldName">
+                <select class="pe-3 text-truncate o_input" t-model="state.fieldName">
                     <option t-foreach="props.fields" t-as="field" t-key="field.name"
                     t-att-value="field.name"
                     t-esc="field.string"
diff --git a/addons/web/static/src/search/search_bar_menu/search_bar_menu.xml b/addons/web/static/src/search/search_bar_menu/search_bar_menu.xml
index fff083ad939..a0b5a51eaec 100644
--- a/addons/web/static/src/search/search_bar_menu/search_bar_menu.xml
+++ b/addons/web/static/src/search/search_bar_menu/search_bar_menu.xml
@@ -3,7 +3,7 @@
 
     <t t-name="web.SearchBarMenu" owl="1">
         <Dropdown togglerClass="'o_searchview_dropdown_toggler d-print-none btn btn-outline-secondary o-no-caret rounded-start-0 h-100'"
-                  menuClass="'o_search_bar_menu d-flex flex-wrap flex-lg-nowrap mt-2 py-3'"
+                  menuClass="'o_search_bar_menu d-flex flex-wrap flex-lg-nowrap w-100 w-md-auto mx-n3 mx-md-auto mt-2 py-3'"
                   position="'bottom-end'"
                   t-if="this.env.searchModel.searchMenuTypes.size">
             <t t-set-slot="toggler" t-slot-scope="scope">
@@ -22,7 +22,7 @@
                             <div class="dropdown-divider" role="separator"/>
                         </t>
                         <t t-if="item.options">
-                            <AccordionItem description="item.description" selected="item.isActive">
+                            <AccordionItem class="'text-truncate'" description="item.description" selected="item.isActive">
                                 <t t-set="subGroup" t-value="null"/>
                                 <t t-foreach="item.options" t-as="option" t-key="option.id">
                                     <t t-if="subGroup !== null and subGroup !== option.groupNumber">
@@ -39,7 +39,7 @@
                             </AccordionItem>
                         </t>
                         <t t-else="">
-                            <SearchDropdownItem class="{ o_menu_item: true, selected: item.isActive }"
+                            <SearchDropdownItem class="{ 'o_menu_item text-truncate': true, selected: item.isActive }"
                                                 checked="item.isActive"
                                                 parentClosingMode="'none'"
                                                 t-esc="item.description"
@@ -67,7 +67,7 @@
                             <div class="dropdown-divider" role="separator"/>
                         </t>
                         <t t-if="item.options">
-                            <AccordionItem description="item.description" selected="item.isActive">
+                            <AccordionItem class="'text-truncate'" description="item.description" selected="item.isActive">
                                 <t t-set="subGroup" t-value="null"/>
                                 <t t-foreach="item.options" t-as="option" t-key="option.id">
                                     <t t-if="subGroup !== null and subGroup !== option.groupNumber">
@@ -84,7 +84,7 @@
                             </AccordionItem>
                         </t>
                         <t t-else="">
-                            <SearchDropdownItem class="{ o_menu_item: true, selected: item.isActive }"
+                            <SearchDropdownItem class="{ 'o_menu_item text-truncate': true, selected: item.isActive }"
                                                 checked="item.isActive"
                                                 parentClosingMode="'none'"
                                                 t-esc="item.description"
@@ -107,7 +107,7 @@
                         <h5 class="o_dropdown_title d-inline">Comparison</h5>
                     </div>
                     <t t-foreach="comparisonItems" t-as="item" t-key="item.id">
-                        <SearchDropdownItem class="{ o_menu_item: true, selected: item.isActive }"
+                        <SearchDropdownItem class="{ 'o_menu_item text-truncate': true, selected: item.isActive }"
                                             checked="item.isActive"
                                             parentClosingMode="'none'"
                                             t-esc="item.description"
@@ -129,13 +129,13 @@
                             <div role="separator" class="dropdown-divider"/>
                         </t>
                         <t t-if="item.type ==='favorite'">
-                            <SearchDropdownItem class="{ o_menu_item: true, selected: item.isActive }"
+                            <SearchDropdownItem class="{ 'o_menu_item text-truncate': true, selected: item.isActive }"
                                                 checked="item.isActive"
                                                 parentClosingMode="'none'"
                                                 onSelected="() => this.onFavoriteSelected(item.id)"
                             >
                                 <span class="d-flex p-0 align-items-center justify-content-between">
-                                    <t t-esc="item.description"/>
+                                    <span t-out="item.description" class="text-truncate"/>
                                     <i class="ms-1 o_icon_right fa fa-trash-o"
                                        title="Delete item"
                                        t-on-click.stop="() => this.openConfirmationDialog(item.id)"