From a2dcdf35cb14a5464f39a35f777f99e4b2200cae Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Mon, 17 Jan 2022 14:58:55 +0000
Subject: [PATCH] [FIX] mail, web: activities, 'dl-horizontal' class is now
 discontinued
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Prior to this commit the 'o_Activity_details' element was using a
discontinued bootstrap class, causing the layout to brake.

task#2731819.

closes odoo/odoo#82893

Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
---
 .../src/components/activity/activity.xml      | 70 ++++++++++---------
 1 file changed, 36 insertions(+), 34 deletions(-)

diff --git a/addons/mail/static/src/components/activity/activity.xml b/addons/mail/static/src/components/activity/activity.xml
index de84a9cdebd..eb8dafc543b 100644
--- a/addons/mail/static/src/components/activity/activity.xml
+++ b/addons/mail/static/src/components/activity/activity.xml
@@ -54,44 +54,46 @@
 
                     <t t-if="activityView.areDetailsVisible">
                         <div class="o_Activity_details">
-                            <dl class="dl-horizontal">
-                                <t t-if="activityView.activity.type">
-                                    <dt>Activity type</dt>
-                                    <dd class="o_Activity_type">
+                            <div class="d-md-table table table-sm mt-2 mb-3">
+                                <div t-if="activityView.activity.type" class="d-md-table-row mb-3">
+                                    <div class="d-md-table-cell font-weight-bold text-md-right m-0 py-md-1 px-md-4">Activity type</div>
+                                    <div class="o_Activity_type d-md-table-cell py-md-1 pr-4">
                                         <t t-esc="activityView.activity.type.displayName"/>
-                                    </dd>
-                                </t>
-                                <t t-if="activityView.activity.creator">
-                                    <dt>Created</dt>
-                                    <dd class="o_Activity_detailsCreation">
-                                        <t t-esc="activityView.formattedCreateDatetime"/>
+                                    </div>
+                                </div>
+                                <div t-if="activityView.activity.creator" class="d-md-table-row mb-3">
+                                    <div class="d-md-table-cell font-weight-bold text-md-right m-0 py-md-1 px-md-4">Created</div>
+                                    <div class="o_Activity_detailsCreation d-md-table-cell py-md-1 pr-4">
+                                        <t t-esc="activityView.formattedCreateDatetime"/>, by
                                         <img class="o_Activity_detailsUserAvatar o_Activity_detailsCreatorAvatar" t-attf-src="/web/image/res.users/{{ activityView.activity.creator.id }}/avatar_128" t-att-title="activityView.activity.creator.nameOrDisplayName" t-att-alt="activityView.activity.creator.nameOrDisplayName"/>
-                                        <span class="o_Activity_detailsCreator">
+                                        <b class="o_Activity_detailsCreator">
                                             <t t-esc="activityView.activity.creator.nameOrDisplayName"/>
-                                        </span>
-                                    </dd>
-                                </t>
-                                <t t-if="activityView.activity.assignee">
-                                    <dt>Assigned to</dt>
-                                    <dd class="o_Activity_detailsAssignation">
+                                        </b>
+                                    </div>
+                                </div>
+                                <div t-if="activityView.activity.assignee" class="d-md-table-row mb-3">
+                                    <div class="d-md-table-cell font-weight-bold text-md-right m-0 py-md-1 px-md-4">Assigned to</div>
+                                    <div class="o_Activity_detailsAssignation d-md-table-cell py-md-1 pr-4">
                                         <img class="o_Activity_detailsUserAvatar o_Activity_detailsAssignationUserAvatar" t-attf-src="/web/image/res.users/{{ activityView.activity.assignee.id }}/avatar_128" t-att-title="activityView.activity.assignee.nameOrDisplayName" t-att-alt="activityView.activity.assignee.nameOrDisplayName"/>
-                                        <t t-esc="activityView.activity.assignee.nameOrDisplayName"/>
-                                    </dd>
-                                </t>
-                                <dt>Due on</dt>
-                                <dd class="o_Activity_detailsDueDate">
-                                    <span class="o_Activity_deadlineDateText"
-                                        t-att-class="{
-                                            'o-default': activityView.activity.state === 'default',
-                                            'o-overdue': activityView.activity.state === 'overdue',
-                                            'o-planned': activityView.activity.state === 'planned',
-                                            'o-today': activityView.activity.state === 'today',
-                                        }"
-                                    >
-                                        <t t-esc="activityView.formattedDeadlineDate"/>
-                                    </span>
-                                </dd>
-                            </dl>
+                                        <b t-esc="activityView.activity.assignee.nameOrDisplayName"/>
+                                    </div>
+                                </div>
+                                <div class="d-md-table-row">
+                                    <div class="d-md-table-cell font-weight-bold text-md-right m-0 py-md-1 px-md-4">Due on</div>
+                                    <div class="o_Activity_detailsDueDate d-md-table-cell py-md-1 pr-4">
+                                        <span class="o_Activity_deadlineDateText"
+                                            t-att-class="{
+                                                'o-default': activityView.activity.state === 'default',
+                                                'o-overdue': activityView.activity.state === 'overdue',
+                                                'o-planned': activityView.activity.state === 'planned',
+                                                'o-today': activityView.activity.state === 'today',
+                                            }"
+                                        >
+                                            <t t-esc="activityView.formattedDeadlineDate"/>
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </t>