From 75c219bfdfd6d8ff7cba84b349ead13b1956b7db Mon Sep 17 00:00:00 2001
From: Pierre Paridans <app@odoo.com>
Date: Tue, 19 Mar 2019 15:53:16 +0000
Subject: [PATCH] [FIX] mail: chatter's button alignment and composer width on
 mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Buttons "Send message / Log note / Activity" are on two lines instead of
one. In addition there is a 1px glitch on the attachment icon.

Also long attachment name on tiny screens (i.e. iPhone 5) breaks the
composer layout: horizontal scrollbar appears.

The two-line buttons effect is related to a change (fix) in Bootstrap
4.2 which removes the white-space: nowrap on .btn. It was originally
introduced in Odoo through https://github.com/odoo/odoo/pull/29949.

Reference: Original Bootstrap PR https://github.com/twbs/bootstrap/pull/27010

Task ID: 1946573

closes odoo/odoo#31939

Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
---
 addons/mail/static/src/scss/chatter.scss  | 21 +++++++++++++++++----
 addons/mail/static/src/scss/composer.scss |  3 +++
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/addons/mail/static/src/scss/chatter.scss b/addons/mail/static/src/scss/chatter.scss
index 599802382a1..7c5bc2b8e35 100644
--- a/addons/mail/static/src/scss/chatter.scss
+++ b/addons/mail/static/src/scss/chatter.scss
@@ -26,11 +26,11 @@
             position: relative;
             float: right;
             flex: 1 1 auto;
+            height: $o-statusbar-height;
 
             .o_chatter_button_attachment {
-                height: $o-statusbar-height - 2px;
+                height: $o-statusbar-height;
                 float: right;
-                padding: 0px;
                 margin-right: 25px;
 
                 .fa-paperclip, .o_chatter_attachment_button_count {
@@ -38,15 +38,20 @@
                 }
             }
             .o_followers {
-                height: $o-statusbar-height + 1;
+                height: $o-statusbar-height;
                 border-bottom: 1px solid transparent;
                 flex: 0 1 auto;
             }
         }
         > .btn {
-            height: $o-statusbar-height + 1;
+            height: $o-statusbar-height;
             border: 1px solid transparent;
         }
+        .btn {
+            @extend .text-nowrap;
+            padding-right: $btn-padding-x;
+            padding-left: $btn-padding-x;
+        }
 
     }
 
@@ -65,3 +70,11 @@
         }
     }
 }
+
+@include media-breakpoint-down(sm) {
+    .o_chatter .o_chatter_topbar > .o_topbar_right_area {
+        .o_chatter_button_attachment {
+            margin-right: initial;
+        }
+    }
+}
diff --git a/addons/mail/static/src/scss/composer.scss b/addons/mail/static/src/scss/composer.scss
index 1f2fffcee60..b265979065b 100644
--- a/addons/mail/static/src/scss/composer.scss
+++ b/addons/mail/static/src/scss/composer.scss
@@ -142,6 +142,9 @@
         &:not(.o_chat_inline_composer) {
             flex-flow: row wrap;
 
+            .o_composer_container {
+                max-width: 100%;
+            }
             .o_composer_container, .o_composer_button_send {
                 flex: 1 0 100%;
             }