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>