diff --git a/addons/mail/static/src/components/attachment/attachment.scss b/addons/mail/static/src/components/attachment/attachment.scss
index fdb59dcf474..a150a484898 100644
--- a/addons/mail/static/src/components/attachment/attachment.scss
+++ b/addons/mail/static/src/components/attachment/attachment.scss
@@ -59,12 +59,6 @@
     padding-right : map-get($spacers, 1);
 }
 
-.o_Attachment_filename {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
 .o_Attachment_image {
     flex-shrink: 0;
     margin: map-get($spacers, 1);
diff --git a/addons/mail/static/src/components/attachment/attachment.xml b/addons/mail/static/src/components/attachment/attachment.xml
index af543ce44a5..97ad38b3fce 100644
--- a/addons/mail/static/src/components/attachment/attachment.xml
+++ b/addons/mail/static/src/components/attachment/attachment.xml
@@ -27,7 +27,7 @@
                         <div class="o_Attachment_imageOverlay">
                             <div class="o_Attachment_details o_Attachment_imageOverlayDetails">
                                 <t t-if="props.showFilename">
-                                    <div class="o_Attachment_filename">
+                                    <div class="o_Attachment_filename text-truncate">
                                         <t t-esc="attachment.displayName"/>
                                     </div>
                                 </t>
@@ -62,7 +62,7 @@
                 <t t-if="(props.showFilename or props.showExtension) and detailsMode === 'card'">
                     <div class="o_Attachment_details">
                         <t t-if="props.showFilename">
-                            <div class="o_Attachment_filename">
+                            <div class="o_Attachment_filename text-truncate">
                                 <t t-esc="attachment.displayName"/>
                             </div>
                         </t>
diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
index ea4b02a5c9f..a6c091fab2f 100644
--- a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
@@ -88,12 +88,6 @@
     min-width: 0;
 }
 
-.o_AttachmentViewer_nameText {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
 .o_AttachmentViewer_toolbar {
     position: absolute;
     bottom: 45px;
diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
index e3c5ef1f312..5e239fe0523 100644
--- a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
@@ -21,7 +21,7 @@
                     </div>
                 </t>
                 <div class="o_AttachmentViewer_headerItem o_AttachmentViewer_name">
-                    <span class="o_AttachmentViewer_nameText" t-esc="attachmentViewer.attachment.displayName"/>
+                    <span class="o_AttachmentViewer_nameText text-truncate" t-esc="attachmentViewer.attachment.displayName"/>
                 </div>
                 <div class="o-autogrow"/>
                 <div class="o_AttachmentViewer_buttonDownload o_AttachmentViewer_headerItem o_AttachmentViewer_headerItemButton" t-on-click="_onClickDownload" role="button" title="Download">
diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.scss b/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
index 6ca4c8b2f42..a7b591f2b0d 100644
--- a/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
@@ -49,9 +49,6 @@
 
 .o_ChatWindowHeader_name {
     max-height: map-get($sizes, 100);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
 }
 
 .o_ChatWindowHeader_rightArea {
diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.xml b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
index c07a2f41208..e4fa3dcf750 100644
--- a/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
@@ -15,7 +15,7 @@
                         threadLocalId="chatWindow.thread.localId"
                     />
                 </t>
-                <div class="o_ChatWindowHeader_item o_ChatWindowHeader_name" t-att-title="chatWindow.name">
+                <div class="o_ChatWindowHeader_item o_ChatWindowHeader_name text-truncate" t-att-title="chatWindow.name">
                     <t t-esc="chatWindow.name"/>
                 </div>
                 <t t-if="chatWindow.thread and chatWindow.thread.localMessageUnreadCounter > 0">
diff --git a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss
index 5125e0da015..1409623bf03 100644
--- a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss
+++ b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss
@@ -49,8 +49,6 @@
 }
 
 .o_ChatWindowHiddenMenu_windowCounter {
-    overflow: hidden;
-    text-overflow: ellipsis;
     margin-left: map-get($spacers, 1);
 }
 
diff --git a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml
index 943fc71d09d..ef915288a19 100644
--- a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml
+++ b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml
@@ -5,7 +5,7 @@
         <div class="dropup o_ChatWindowHiddenMenu">
             <div class="dropdown-toggle o_ChatWindowHiddenMenu_dropdownToggle" t-att-class="{ show: env.messaging.chatWindowManager.isHiddenMenuOpen }" t-on-click="_onClickToggle">
                 <div class="fa fa-comments-o o_ChatWindowHiddenMenu_dropdownToggleIcon o_ChatWindowHiddenMenu_dropdownToggleItem"/>
-                <div class="o_ChatWindowHiddenMenu_dropdownToggleItem o_ChatWindowHiddenMenu_windowCounter">
+                <div class="o_ChatWindowHiddenMenu_dropdownToggleItem o_ChatWindowHiddenMenu_windowCounter text-truncate">
                     <t t-esc="env.messaging.chatWindowManager.allOrderedHidden.length"/>
                 </div>
             </div>
diff --git a/addons/mail/static/src/components/composer/composer.scss b/addons/mail/static/src/components/composer/composer.scss
index 798943c261d..5070b2f2625 100644
--- a/addons/mail/static/src/components/composer/composer.scss
+++ b/addons/mail/static/src/components/composer/composer.scss
@@ -126,8 +126,6 @@
 
 .o_Composer_threadTextualTypingStatus {
     font-size: $font-size-sm;
-    overflow: hidden;
-    text-overflow: ellipsis;
 
     &:before {
         // invisible character so that typing status bar has constant height, regardless of text content.
diff --git a/addons/mail/static/src/components/composer/composer.xml b/addons/mail/static/src/components/composer/composer.xml
index f7155a58712..90758f887d0 100644
--- a/addons/mail/static/src/components/composer/composer.xml
+++ b/addons/mail/static/src/components/composer/composer.xml
@@ -26,7 +26,7 @@
                     t-ref="fileUploader"
                 />
                 <t t-if="hasHeader">
-                    <div class="o_Composer_coreHeader">
+                    <div class="o_Composer_coreHeader text-truncate">
                         <t t-if="props.hasThreadName and composer.thread">
                             <span class="o_Composer_threadName">
                                 on: <b><t t-esc="composer.thread.displayName"/></b>
diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.scss b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.scss
index 4e474355600..f0a908672e4 100644
--- a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.scss
+++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.scss
@@ -13,16 +13,12 @@
     // because no shrink, ensure it cannot overflow with a max-width
     flex: 0 0 auto;
     max-width: map-get($sizes, 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 {
diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml
index db90d379946..bf66b574bca 100644
--- a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml
+++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml
@@ -5,15 +5,15 @@
         <a class="o_ComposerSuggestion dropdown-item" t-att-class="{ 'active': props.isActive }" href="#" t-att-title="title()" role="menuitem" t-on-click="_onClick">
             <t t-if="record">
                 <t t-if="isCannedResponse">
-                    <span class="o_ComposerSuggestion_part1"><t t-esc="record.source"/></span>
-                    <span class="o_ComposerSuggestion_part2"><t t-esc="record.substitution"/></span>
+                    <span class="o_ComposerSuggestion_part1 text-truncate"><t t-esc="record.source"/></span>
+                    <span class="o_ComposerSuggestion_part2 text-truncate"><t t-esc="record.substitution"/></span>
                 </t>
                 <t t-if="isChannel">
-                    <span class="o_ComposerSuggestion_part1"><t t-esc="record.name"/></span>
+                    <span class="o_ComposerSuggestion_part1 text-truncate"><t t-esc="record.name"/></span>
                 </t>
                 <t t-if="isCommand">
-                    <span class="o_ComposerSuggestion_part1"><t t-esc="record.name"/></span>
-                    <span class="o_ComposerSuggestion_part2"><t t-esc="record.help"/></span>
+                    <span class="o_ComposerSuggestion_part1 text-truncate"><t t-esc="record.name"/></span>
+                    <span class="o_ComposerSuggestion_part2 text-truncate"><t t-esc="record.help"/></span>
                 </t>
                 <t t-if="isPartner">
                     <PartnerImStatusIcon
@@ -21,9 +21,9 @@
                         hasBackground="false"
                         partnerLocalId="record.localId"
                     />
-                    <span class="o_ComposerSuggestion_part1"><t t-esc="record.nameOrDisplayName"/></span>
+                    <span class="o_ComposerSuggestion_part1 text-truncate"><t t-esc="record.nameOrDisplayName"/></span>
                     <t t-if="record.email">
-                        <span class="o_ComposerSuggestion_part2">(<t t-esc="record.email"/>)</span>
+                        <span class="o_ComposerSuggestion_part2 text-truncate">(<t t-esc="record.email"/>)</span>
                     </t>
                 </t>
             </t>
diff --git a/addons/mail/static/src/components/composer_text_input/composer_text_input.scss b/addons/mail/static/src/components/composer_text_input/composer_text_input.scss
index e821065ba5b..066364847bc 100644
--- a/addons/mail/static/src/components/composer_text_input/composer_text_input.scss
+++ b/addons/mail/static/src/components/composer_text_input/composer_text_input.scss
@@ -23,9 +23,7 @@
     overflow: auto;
 
     &::placeholder {
-        white-space: nowrap;
-        overflow-x: hidden;
-        text-overflow: ellipsis;
+        @include text-truncate();
     }
 
     &.o-composer-is-compact {
diff --git a/addons/mail/static/src/components/follower/follower.scss b/addons/mail/static/src/components/follower/follower.scss
index 509a119fb61..2207fd58789 100644
--- a/addons/mail/static/src/components/follower/follower.scss
+++ b/addons/mail/static/src/components/follower/follower.scss
@@ -19,6 +19,7 @@
     align-items: center;
     display: flex;
     flex: 1;
+    min-width: 0;
     padding-left: map-get($spacers, 3);
     padding-right: map-get($spacers, 3);
 }
diff --git a/addons/mail/static/src/components/follower/follower.xml b/addons/mail/static/src/components/follower/follower.xml
index f82722cf870..5036e56fabc 100644
--- a/addons/mail/static/src/components/follower/follower.xml
+++ b/addons/mail/static/src/components/follower/follower.xml
@@ -4,9 +4,9 @@
     <t t-name="mail.Follower" owl="1">
         <div class="o_Follower">
             <t t-if="follower">
-                <a class="o_Follower_details" t-att-class="{ 'o-inactive': !follower.isActive }" href="#" t-on-click="_onClickDetails">
+                <a class="o_Follower_details d-flex" t-att-class="{ 'o-inactive': !follower.isActive }" href="#" t-on-click="_onClickDetails">
                     <img class="o_Follower_avatar" t-att-src="follower.partner.avatarUrl" alt="Avatar"/>
-                    <span class="o_Follower_name" t-esc="follower.name or follower.displayName"/>
+                    <span class="o_Follower_name flex-shrink text-truncate" t-esc="follower.name or follower.displayName"/>
                 </a>
                 <t t-if="follower.isEditable">
                     <button class="btn btn-icon o_Follower_button o_Follower_editButton" title="Edit subscription" t-on-click="_onClickEdit">
diff --git a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.scss b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.scss
index 84d7fd03906..1b87f269f5f 100644
--- a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.scss
+++ b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.scss
@@ -15,7 +15,12 @@
 .o_FollowerListMenu_dropdown {
     display: flex;
     flex-flow: column;
-    overflow-y: auto;
+    /**
+     * Note: Min() refers to CSS min() and not SCSS min().
+     *
+     * To by-pass SCSS min() shadowing CSS min(), we rely on SCSS being case-sensitive while CSS isn't.
+     */
+    max-width: Min(400px, 95vw);
 }
 
 .o_FollowerListMenu_followers {
diff --git a/addons/mail/static/src/components/message/message.xml b/addons/mail/static/src/components/message/message.xml
index 2c8cb4fc31a..f8c916a9d97 100644
--- a/addons/mail/static/src/components/message/message.xml
+++ b/addons/mail/static/src/components/message/message.xml
@@ -63,17 +63,17 @@
                     <t t-if="!props.isSquashed">
                         <div class="o_Message_header">
                             <t t-if="message.author">
-                                <div class="o_Message_authorName o_Message_authorRedirect o_redirect" t-on-click="_onClickAuthorName" title="Open profile">
+                                <div class="o_Message_authorName o_Message_authorRedirect o_redirect text-truncate" t-on-click="_onClickAuthorName" title="Open profile">
                                     <t t-esc="message.author.nameOrDisplayName"/>
                                 </div>
                             </t>
                             <t t-elif="message.email_from">
-                                <a class="o_Message_authorName" t-attf-href="mailto:{{ message.email_from }}?subject=Re: {{ message.subject ? message.subject : '' }}">
+                                <a class="o_Message_authorName text-truncate" t-attf-href="mailto:{{ message.email_from }}?subject=Re: {{ message.subject ? message.subject : '' }}">
                                     <t t-esc="message.email_from"/>
                                 </a>
                             </t>
                             <t t-else="">
-                                <div class="o_Message_authorName">
+                                <div class="o_Message_authorName text-truncate">
                                     Anonymous
                                 </div>
                             </t>
diff --git a/addons/mail/static/src/components/notification_group/notification_group.xml b/addons/mail/static/src/components/notification_group/notification_group.xml
index c9f41c79734..51a7c92efac 100644
--- a/addons/mail/static/src/components/notification_group/notification_group.xml
+++ b/addons/mail/static/src/components/notification_group/notification_group.xml
@@ -11,7 +11,7 @@
                 </div>
                 <div class="o_NotificationGroup_content">
                     <div class="o_NotificationGroup_header">
-                        <span class="o_NotificationGroup_name">
+                        <span class="o_NotificationGroup_name text-truncate">
                             <t t-esc="group.res_model_name"/>
                         </span>
                         <span class="o_NotificationGroup_counter">
@@ -25,7 +25,7 @@
                         </t>
                     </div>
                     <div class="o_NotificationGroup_core">
-                        <span class="o_NotificationGroup_coreItem o_NotificationGroup_inlineText">
+                        <span class="o_NotificationGroup_coreItem o_NotificationGroup_inlineText text-truncate">
                             <t t-if="group.notification_type === 'email'">
                                 An error occurred when sending an email.
                             </t>
diff --git a/addons/mail/static/src/components/notification_list/notification_list_item.scss b/addons/mail/static/src/components/notification_list/notification_list_item.scss
index 9140800ef86..ead2c8b11c2 100644
--- a/addons/mail/static/src/components/notification_list/notification_list_item.scss
+++ b/addons/mail/static/src/components/notification_list/notification_list_item.scss
@@ -63,10 +63,6 @@
 }
 
 @mixin o-mail-notification-list-item-inline-text-layout {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
     &.o-empty::before {
         content: '\00a0'; // keep line-height as if it had content
     }
@@ -78,10 +74,6 @@
 }
 
 @mixin o-mail-notification-list-item-name-layout {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
     &.o-mobile {
         font-size: 1.1em;
     }
diff --git a/addons/mail/static/src/components/notification_request/notification_request.xml b/addons/mail/static/src/components/notification_request/notification_request.xml
index f59c671a723..ace53cbcf5f 100644
--- a/addons/mail/static/src/components/notification_request/notification_request.xml
+++ b/addons/mail/static/src/components/notification_request/notification_request.xml
@@ -15,12 +15,12 @@
             </div>
             <div class="o_NotificationRequest_content">
                 <div class="o_NotificationRequest_header">
-                    <span class="o_NotificationRequest_name" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }">
+                    <span class="o_NotificationRequest_name text-truncate" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }">
                         <t t-esc="getHeaderText()"/>
                     </span>
                 </div>
                 <div class="o_NotificationRequest_core">
-                    <span class="o_NotificationRequest_coreItem o_NotificationRequest_inlineText">
+                    <span class="o_NotificationRequest_coreItem o_NotificationRequest_inlineText text-truncate">
                         Enable desktop notifications to chat.
                     </span>
                 </div>
diff --git a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
index ea8c1bcf1d1..a77da68b617 100644
--- a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
+++ b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
@@ -24,7 +24,7 @@
                 </div>
                 <div class="o_ThreadNeedactionPreview_content">
                     <div class="o_ThreadNeedactionPreview_header">
-                        <span class="o_ThreadNeedactionPreview_name" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }">
+                        <span class="o_ThreadNeedactionPreview_name text-truncate" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }">
                             <t t-esc="thread.displayName"/>
                         </span>
                         <span class="o_ThreadNeedactionPreview_counter">
@@ -38,7 +38,7 @@
                         </t>
                     </div>
                     <div class="o_ThreadNeedactionPreview_core">
-                        <span class="o_ThreadNeedactionPreview_coreItem o_ThreadNeedactionPreview_inlineText" t-att-class="{ 'o-empty': inlineLastNeedactionMessageAsOriginThreadBody.length === 0 }">
+                        <span class="o_ThreadNeedactionPreview_coreItem o_ThreadNeedactionPreview_inlineText text-truncate" t-att-class="{ 'o-empty': inlineLastNeedactionMessageAsOriginThreadBody.length === 0 }">
                             <t t-if="thread.lastNeedactionMessageAsOriginThread and thread.lastNeedactionMessageAsOriginThread.author">
                                 <MessageAuthorPrefix
                                     messageLocalId="thread.lastNeedactionMessageAsOriginThread.localId"
diff --git a/addons/mail/static/src/components/thread_preview/thread_preview.xml b/addons/mail/static/src/components/thread_preview/thread_preview.xml
index 1ca993574f0..ec033843a3b 100644
--- a/addons/mail/static/src/components/thread_preview/thread_preview.xml
+++ b/addons/mail/static/src/components/thread_preview/thread_preview.xml
@@ -25,7 +25,7 @@
                 </div>
                 <div class="o_ThreadPreview_content">
                     <div class="o_ThreadPreview_header">
-                        <span class="o_ThreadPreview_name" t-att-class="{ 'o-mobile': env.messaging.device.isMobile, 'o-muted': thread.localMessageUnreadCounter === 0 }">
+                        <span class="o_ThreadPreview_name text-truncate" t-att-class="{ 'o-mobile': env.messaging.device.isMobile, 'o-muted': thread.localMessageUnreadCounter === 0 }">
                             <t t-esc="thread.displayName"/>
                         </span>
                         <t t-if="thread.localMessageUnreadCounter > 0">
@@ -41,7 +41,7 @@
                         </t>
                     </div>
                     <div class="o_ThreadPreview_core">
-                        <span class="o_ThreadPreview_coreItem o_ThreadPreview_inlineText" t-att-class="{ 'o-empty': inlineLastMessageBody.length === 0 }">
+                        <span class="o_ThreadPreview_coreItem o_ThreadPreview_inlineText text-truncate" t-att-class="{ 'o-empty': inlineLastMessageBody.length === 0 }">
                             <t t-if="thread.lastMessage and thread.lastMessage.author">
                                 <MessageAuthorPrefix
                                     messageLocalId="thread.lastMessage.localId"
diff --git a/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.xml b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.xml
index 722d07389f8..d0e33e0f35d 100644
--- a/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.xml
+++ b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.xml
@@ -6,7 +6,7 @@
             <t t-if="thread and thread.orderedOtherTypingMembers.length > 0">
                 <ThreadTypingIcon animation="'pulse'" size="'medium'"/>
                 <span class="o_ThreadTextualTypingStatus_separator"/>
-                <span t-esc="thread.typingStatusText"/>
+                <span class="text-truncate" t-esc="thread.typingStatusText"/>
             </t>
         </div>
     </t>