From 292ffeec00532751fa539777760cce59cfdf341d Mon Sep 17 00:00:00 2001
From: Munaf Khan <mub@odoo.com>
Date: Thu, 29 Apr 2021 07:03:33 +0000
Subject: [PATCH] [FIX] various: avoid scroll for button(s) within mail
 templates

Right now, for notifications handled by odoo (which are being displayed on
discuss app / object chatter), few of the buttons have unexpected scroll
(mostly the CTAs that redirect to record / portal views) and ruins the UI.

This commit fixes the issue by improving such templates by using proper
paddings on the button.

TaskId:2518863

closes odoo/odoo#70083

Related: odoo/enterprise#18225
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
---
 addons/calendar/data/mail_template_data.xml       | 6 +++---
 addons/hr_recruitment/data/mail_template_data.xml | 4 ++--
 addons/mail/data/mail_templates.xml               | 4 ++--
 addons/website_sale/data/mail_template_data.xml   | 2 +-
 addons/website_slides/data/mail_template_data.xml | 8 ++++----
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/addons/calendar/data/mail_template_data.xml b/addons/calendar/data/mail_template_data.xml
index 8a1532e49ba..452962d3c24 100644
--- a/addons/calendar/data/mail_template_data.xml
+++ b/addons/calendar/data/mail_template_data.xml
@@ -36,7 +36,7 @@
         Your meeting <strong>${object.event_id.name}</strong> has been booked.
         % endif
     </p>
-    <div style="text-align: center; margin: 16px 0px 16px 0px;">
+    <div style="text-align: center; padding: 16px 0px 16px 0px;">
         % if not is_online or object.state != 'accepted':
         <a href="/calendar/meeting/accept?token=${object.access_token}&amp;id=${object.event_id.id}"
             style="padding: 5px 10px; color: #FFFFFF; text-decoration: none; background-color: #875A7B; border: 1px solid #875A7B; border-radius: 3px">
@@ -164,7 +164,7 @@
         ${object.event_id.get_display_time_tz(tz=object.partner_id.tz)}.
         % endif
     </p>
-    <div style="text-align: center; margin: 16px 0px 16px 0px;">
+    <div style="text-align: center; padding: 16px 0px 16px 0px;">
         <a href="/calendar/meeting/accept?token=${object.access_token}&amp;id=${object.event_id.id}"
             style="padding: 5px 10px; color: #FFFFFF; text-decoration: none; background-color: #875A7B; border: 1px solid #875A7B; border-radius: 3px">
             Accept</a>
@@ -266,7 +266,7 @@
         Hello ${object.common_name},<br/><br/>
         This is a reminder for the below event :
     </p>
-    <div style="text-align: center; margin: 16px 0px 16px 0px;">
+    <div style="text-align: center; padding: 16px 0px 16px 0px;">
         <a href="/calendar/${'recurrence' if recurrent else 'meeting'}/accept?token=${object.access_token}&amp;id=${object.event_id.id}"
             style="padding: 5px 10px; color: #FFFFFF; text-decoration: none; background-color: #875A7B; border: 1px solid #875A7B; border-radius: 3px">
             Accept</a>
diff --git a/addons/hr_recruitment/data/mail_template_data.xml b/addons/hr_recruitment/data/mail_template_data.xml
index 5902ad312b4..2cabd82d51a 100644
--- a/addons/hr_recruitment/data/mail_template_data.xml
+++ b/addons/hr_recruitment/data/mail_template_data.xml
@@ -77,7 +77,7 @@
                 call or an interview.
                 <br/><br/>
                 % if 'website_url' in object.job_id and object.job_id.website_url:
-                    <div style="margin: 16px 8px 16px 8px;">
+                    <div style="padding: 16px 8px 16px 8px;">
                         <a href="${object.job_id.website_url}"
                             style="background-color: #875a7b; text-decoration: none; color: #fff; padding: 8px 16px 8px 16px; border-radius: 5px;">Job Description</a>
                     </div>
@@ -177,7 +177,7 @@
                 We will come back to you shortly.
 
                 % if 'website_url' in object.job_id and object.job_id.website_url:
-                    <div style="margin: 16px 8px 16px 8px;">
+                    <div style="padding: 16px 8px 16px 8px;">
                         <a href="${object.job_id.website_url}"
                             style="background-color: #875a7b; text-decoration: none; color: #fff; padding: 8px 16px 8px 16px; border-radius: 5px;">Job Description</a>
                     </div>
diff --git a/addons/mail/data/mail_templates.xml b/addons/mail/data/mail_templates.xml
index 2f99061e7cd..3071cb5bc0c 100644
--- a/addons/mail/data/mail_templates.xml
+++ b/addons/mail/data/mail_templates.xml
@@ -270,7 +270,7 @@
     <span>Dear <t t-esc="object.user_id.sudo().name"/>,</span><br />
     <span style="margin-top: 8px;">You have been assigned to the <t t-esc="model_description or 'document'"/> <t t-esc="object.display_name"/>.</span>
 </p>
-<p style="margin-top: 24px; margin-bottom: 16px;">
+<p style="padding-top: 24px; padding-bottom: 16px;">
     <a t-att-href="access_link" t-att-data-oe-model="object._name" t-att-data-oe-id="object.id" style="background-color:#875A7B; padding: 10px; text-decoration: none; color: #fff; border-radius: 5px;">
             View <t t-esc="model_description or 'document'"/>
     </a>
@@ -303,7 +303,7 @@
     <t t-if="activity.summary">(<span t-field="activity.summary"/>)</t>
     on <span t-field="activity.res_name"/>
     to close for <span t-field="activity.date_deadline"/>.<br />
-    <p style="margin: 16px 0px 16px 0px;">
+    <p style="padding: 16px 0px 16px 0px;">
         <a t-att-href="access_link" t-att-data-oe-model="activity.res_model" t-att-data-oe-id="activity.res_id"
             style="background-color:#875A7B; padding: 8px 16px 8px 16px; text-decoration: none; color: #fff; border-radius: 5px;">
             View <t t-esc="model_description or 'document'"/>
diff --git a/addons/website_sale/data/mail_template_data.xml b/addons/website_sale/data/mail_template_data.xml
index 2eac01a9886..ff09e1e59b3 100644
--- a/addons/website_sale/data/mail_template_data.xml
+++ b/addons/website_sale/data/mail_template_data.xml
@@ -56,7 +56,7 @@
                         % endfor
                         <hr/>
                     % endif
-                    <div style="text-align: center; margin: 16px 0px 16px 0px; font-size: 14px;">
+                    <div style="text-align: center; padding: 16px 0px 16px 0px; font-size: 14px;">
                         <a href="${object.get_base_url()}/shop/cart?access_token=${object.access_token}"
                             target="_blank"
                             style="background-color: #875A7B; padding: 8px 16px 8px 16px; text-decoration: none; color: #fff; border-radius: 5px; font-size:13px;">
diff --git a/addons/website_slides/data/mail_template_data.xml b/addons/website_slides/data/mail_template_data.xml
index 08457d7d2c3..148b26db1a0 100644
--- a/addons/website_slides/data/mail_template_data.xml
+++ b/addons/website_slides/data/mail_template_data.xml
@@ -12,13 +12,13 @@
                         There is something new in the course <strong>${object.channel_id.name}</strong> you are following:<br/><br/>
                         <center><strong>${object.name}</strong></center>
                         % if object.image_1024
-                        <div style="margin: 16px 8px 16px 8px; text-align: center;">
+                        <div style="padding: 16px 8px 16px 8px; text-align: center;">
                             <a href="${object.website_url}">
                                 <img alt="${object.name}" src="${ctx['base_url']}/web/image/slide.slide/${object.id}/image_1024" style="height:auto; width:150px; margin: 16px;"/>
                             </a>
                         </div>
                         % endif
-                        <div style="margin: 16px 8px 16px 8px; text-align: center;">
+                        <div style="padding: 16px 8px 16px 8px; text-align: center;">
                             <a href="${object.website_url}"
                                 style="background-color: #875a7b; padding: 8px 16px 8px 16px; text-decoration: none; color: #fff; border-radius: 5px;">View content</a>
                         </div>
@@ -49,7 +49,7 @@
                                 <img alt="${object.name}" src="${ctx['base_url']}/web/image/slide.slide/${object.id}/image_1024" style="height:auto; width:150px; margin: 16px;"/>
                             </a>
                         </div>
-                        <div style="margin: 16px 8px 16px 8px; text-align: center;">
+                        <div style="padding: 16px 8px 16px 8px; text-align: center;">
                             <a href="${(object.website_url + '?fullscreen=1') if ctx['fullscreen'] else object.website_url | safe}"
                                 style="background-color: #875a7b; padding: 8px 16px 8px 16px; text-decoration: none; color: #fff; border-radius: 5px;">View <strong>${object.name}</strong></a>
                         </div>
@@ -78,7 +78,7 @@
                         <p>You've completed the course <b>${object.channel_id.name}</b></p>
                         <p>Check out the other available courses.</p><br/>
 
-                        <div style="margin: 16px 8px 16px 8px; text-align: center;">
+                        <div style="padding: 16px 8px 16px 8px; text-align: center;">
                             <a href="/slides/all" style="background-color: #875a7b; padding: 8px 16px 8px 16px; text-decoration: none; color: #fff; border-radius: 5px;">
                                 Explore courses
                             </a>