From 627fd7724813a580ecac566c3972d7653df36588 Mon Sep 17 00:00:00 2001
From: Pierre Paridans <app@odoo.com>
Date: Thu, 18 Apr 2019 12:40:33 +0000
Subject: [PATCH] [FIX] mail: DocumentViewer's buttons alignment on mobile

The action buttons in the document viewer were badly aligned on small
screens, and specifically when moving to multiple lines to fit on the
viewport.

This commit adjusts the positionning and margins between those buttons
to stay consistent on every screens size (smallest to biggest).

Task ID: 1917277
---
 addons/mail/static/src/scss/composer.scss | 16 +++++++++++++---
 addons/mail/static/src/xml/thread.xml     |  6 +++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/addons/mail/static/src/scss/composer.scss b/addons/mail/static/src/scss/composer.scss
index 3eae93b03cd..c4373e98cd2 100644
--- a/addons/mail/static/src/scss/composer.scss
+++ b/addons/mail/static/src/scss/composer.scss
@@ -437,6 +437,12 @@
                     box-shadow: 1px 1px 20px 1px #000;
                 }
 
+                @include media-breakpoint-down(sm) {
+                    .o_viewer_pdf, .o_viewer_text {
+                        width: 100%;
+                    }
+                }
+
                 .o_viewer_text {
                     width: 80%;
                     height: 100%;
@@ -452,11 +458,15 @@
         }
 
         .o_viewer_toolbar {
-            @include o-position-absolute($left: 50%, $bottom: $grid-gutter-width*0.5);
-            transform: translate(-50%, -50%);
+            @include o-position-absolute($bottom: $grid-gutter-width*0.5);
+            width: 100%;
             overflow: hidden;
+            justify-content: center;
             border-radius: 4px;
-            background-color: rgba(black, 0.4);
+
+            > .btn-group {
+                background-color: rgba(black, 0.4);
+            }
 
             .o_viewer_toolbar_btn {
                 @include o-viewer-black-btn;
diff --git a/addons/mail/static/src/xml/thread.xml b/addons/mail/static/src/xml/thread.xml
index 978562c25a0..dada8901491 100644
--- a/addons/mail/static/src/xml/thread.xml
+++ b/addons/mail/static/src/xml/thread.xml
@@ -61,15 +61,15 @@
                 </div>
             </div>
             <div t-if="widget.activeAttachment.fileType == 'image'" class="o_viewer_toolbar btn-toolbar" role="toolbar">
-                <div class="btn-group ml0" role="group">
+                <div class="btn-group" role="group">
                     <a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_in" data-toggle="tooltip" title="Zoom In"><i class="fa fa-fw fa-plus" role="img" aria-label="Zoom In"/></a>
                     <a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_reset disabled" data-toggle="tooltip" title="Reset Zoom"><i class="fa fa-fw fa-search" role="img" aria-label="Reset Zoom"/></a>
                     <a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_out disabled" data-toggle="tooltip" title="Zoom Out"><i class="fa fa-fw fa-minus" role="img" aria-label="Zoom Out"/></a>
                 </div>
-                <div class="btn-group ml8" role="group">
+                <div class="btn-group" role="group">
                     <a role="button" href="#" class="o_viewer_toolbar_btn btn o_rotate" data-toggle="tooltip" title="Rotate"><i class="fa fa-fw fa-repeat" role="img" aria-label="Rotate"/></a>
                 </div>
-                <div class="btn-group ml8" role="group">
+                <div class="btn-group" role="group">
                     <a role="button" href="#" class="o_viewer_toolbar_btn btn o_print_btn" data-toggle="tooltip" title="Print"><i class="fa fa-fw fa-print" role="img" aria-label="Print"/></a>
                     <a role="button" href="#" class="o_viewer_toolbar_btn btn o_download_btn" data-toggle="tooltip" title="Download"><i class="fa fa-fw fa-download" role="img" aria-label="Download"/></a>
                 </div>