[FIX] mail: chatter's button alignment and composer width on mobile

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

@@ -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;
+        }
+    }
+}

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%;
             }