[FIX] mail: fix width overflow of mentions

task-2275828

X-original-commit: be56641d88fe25bb048a174a327a8b2890e7ae0f

addons/mail/static/src/components/composer_suggestion/composer_suggestion.js

@@ -55,6 +55,31 @@ class ComposerSuggestion extends Component {
         return this.env.models[this.props.modelName].get(this.props.recordLocalId);
     }
 
+    /**
+     * Returns a descriptive title for this suggestion. Useful to be able to
+     * read both parts when they are overflowing the UI.
+     *
+     * @returns {string}
+     */
+    title() {
+        if (this.isCannedResponse) {
+            return _.str.sprintf("%s: %s", this.record.source, this.record.substitution);
+        }
+        if (this.isChannel) {
+            return this.record.name;
+        }
+        if (this.isCommand) {
+            return _.str.sprintf("%s: %s", this.record.name, this.record.help);
+        }
+        if (this.isPartner) {
+            if (this.record.email) {
+                return _.str.sprintf("%s (%s)", this.record.nameOrDisplayName, this.record.email);
+            }
+            return this.record.nameOrDisplayName;
+        }
+        return "";
+    }
+
     //--------------------------------------------------------------------------
     // Handlers
     //--------------------------------------------------------------------------

addons/mail/static/src/components/composer_suggestion/composer_suggestion.scss

@@ -9,7 +9,24 @@
 }
 
 .o_ComposerSuggestion_part1 {
+    // avoid shrinking part 1 because it is more important than part 2
+    // because no shrink, ensure it cannot overflow with a max-width
+    flex: 0 0 auto;
+    max-width: 100%;
+    overflow: hidden;
     padding-inline-end: map-get($spacers, 2);
+    text-overflow: ellipsis;
+}
+
+.o_ComposerSuggestion_part2 {
+    // shrink part 2 to properly ensure it cannot overflow
+    flex: 0 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.o_ComposerSuggestion_partnerImStatusIcon {
+    flex: 0 0 auto;
 }
 
 // ------------------------------------------------------------------

addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml

@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ComposerSuggestion" owl="1">
-        <a class="o_ComposerSuggestion dropdown-item" t-att-class="{ 'active': props.isActive }" href="#" role="menuitem" t-on-click="_onClick" t-on-mouseover="_onMouseOver">
+        <a class="o_ComposerSuggestion dropdown-item" t-att-class="{ 'active': props.isActive }" href="#" t-att-title="title()" role="menuitem" t-on-click="_onClick" t-on-mouseover="_onMouseOver">
             <t t-if="record">
                 <t t-if="isCannedResponse">
                     <span class="o_ComposerSuggestion_part1"><t t-esc="record.source"/></span>
@@ -17,6 +17,7 @@
                 </t>
                 <t t-if="isPartner">
                     <PartnerImStatusIcon
+                        class="o_ComposerSuggestion_partnerImStatusIcon"
                         hasBackground="false"
                         partnerLocalId="record.localId"
                     />

addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.scss

@@ -4,8 +4,20 @@
 
 .o_ComposerSuggestionList {
     position: absolute;
+    // prevent suggestion items from overflowing
+    width: 100%;
 
     &.o-lowPosition {
         bottom: 0;
     }
 }
+
+.o_ComposerSuggestionList_drop {
+    // prevent suggestion items from overflowing
+    width: 100%;
+}
+
+.o_ComposerSuggestionList_list {
+    // prevent suggestion items from overflowing
+    width: 100%;
+}

addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.xml

@@ -3,7 +3,7 @@
 
     <t t-name="mail.ComposerSuggestionList" owl="1">
         <div class="o_ComposerSuggestionList" t-att-class="{ 'o-lowPosition': props.isBelow }">
-            <div t-att-class="{ 'dropdown': props.isBelow, 'dropup': !props.isBelow }">
+            <div class="o_ComposerSuggestionList_drop" t-att-class="{ 'dropdown': props.isBelow, 'dropup': !props.isBelow }">
                 <div class="o_ComposerSuggestionList_list dropdown-menu show">
                     <t t-foreach="composer.mainSuggestedRecordsList" t-as="record" t-key="record.localId">
                         <ComposerSuggestion