From a84e9b05ca1b73748879e12912296fe9764f596a Mon Sep 17 00:00:00 2001
From: MerlinGuillaume <megu@odoo.com>
Date: Thu, 27 Apr 2023 08:20:16 +0000
Subject: [PATCH] [FIX] web: prevent email field to overflow

Readonly email fields break the layout if the value is long enough

Steps to reproduce:
1. Install CRM and Studio
2. Go to CRM and open any lead
3. Change the lead email and make it too large for the field size
4. Toggle Studio, in the View tab, uncheck 'Can Edit'
5. Close Studio
6. The email overflows its expected position

Solution:
Put the email field inside a grid layout div

opw-3248361

closes odoo/odoo#121020

X-original-commit: 855e72af9907cbfdcf1a0debd8011be9934eeb8f
Signed-off-by: Guillaume Merlin (megu) <megu@odoo.com>
---
 addons/web/static/src/views/fields/email/email_field.xml | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/views/fields/email/email_field.xml b/addons/web/static/src/views/fields/email/email_field.xml
index f50f08cc07c..993a34b94a3 100644
--- a/addons/web/static/src/views/fields/email/email_field.xml
+++ b/addons/web/static/src/views/fields/email/email_field.xml
@@ -3,7 +3,9 @@
 
     <t t-name="web.EmailField" owl="1">
         <t t-if="props.readonly">
-            <a class="o_form_uri o_text_overflow" t-on-click.stop="" t-att-href="props.record.data[props.name] ? 'mailto:'+props.record.data[props.name] : undefined" t-esc="props.record.data[props.name] || ''"/>
+            <div class="d-grid">
+                <a class="o_form_uri o_text_overflow" t-on-click.stop="" t-att-href="props.record.data[props.name] ? 'mailto:'+props.record.data[props.name] : undefined" t-esc="props.record.data[props.name] || ''"/>
+            </div>
         </t>
         <t t-else="">
             <div class="d-inline-flex w-100">