From 1c79cbe778e8020a42b853128e5ea7e9dfb2fc5e Mon Sep 17 00:00:00 2001
From: "Chrysanthe (chgo)" <chgo@odoo.com>
Date: Tue, 26 Dec 2023 10:18:42 +0100
Subject: [PATCH] [FIX] portal: fix layout and spacing issues

This commit fixes some layout issues from the portal redesign.

The aims of this commit is to :

1) fix some issues with the column layout, mainly in the quotation section.

2) fix some spacing issues by using the right classes and better units.

3) fix the typescale and the information architecture with the right
heading tag.

4) fix some layout issues within the column layout and fixing unconsistent
layouts shared between different items.

5) fix an issue about the first information of the sidebar often
being hidden when scrolling, due to the sticky position of the sidebar

task-3651084

Part-of: odoo/odoo#147496
---
 .../views/account_portal_templates.xml        |   2 +-
 addons/portal/static/src/scss/portal.scss     |   6 +
 addons/portal/views/portal_templates.xml      |   8 +-
 .../project_portal_project_task_templates.xml |   6 +-
 addons/purchase/views/portal_templates.xml    |   2 +-
 addons/sale/i18n/sale.pot                     |  31 ++---
 addons/sale/views/sale_portal_templates.xml   | 100 +++++++-------
 addons/sale_stock/i18n/sale_stock.pot         |  31 +++--
 .../views/sale_stock_portal_template.xml      | 122 +++++++++---------
 9 files changed, 150 insertions(+), 158 deletions(-)

diff --git a/addons/account/views/account_portal_templates.xml b/addons/account/views/account_portal_templates.xml
index 25c42521f8a..1981569bb74 100644
--- a/addons/account/views/account_portal_templates.xml
+++ b/addons/account/views/account_portal_templates.xml
@@ -108,7 +108,7 @@
                 </t>
             </t>
 
-            <div class="row mt16 o_portal_invoice_sidebar">
+            <div class="row o_portal_invoice_sidebar">
                 <!-- Sidebar -->
                 <t t-call="portal.portal_record_sidebar">
                     <t t-set="classes" t-value="'col-lg-3 col-xl-4 d-print-none me-lg-auto'"/>
diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss
index 67bb8d3fd45..3d2e53ef459 100644
--- a/addons/portal/static/src/scss/portal.scss
+++ b/addons/portal/static/src/scss/portal.scss
@@ -356,6 +356,12 @@ img, .media_iframe_video, .o_image {
             position: relative;
         }
     }
+
+    .o_portal_sidebar_content {
+        @include media-breakpoint-up(lg) {
+            @include o-position-sticky($top: $spacer * 5);
+        }
+    }
 }
 
 // ------------------------------------------------------------
diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index 4e9c72af1fc..991a15af382 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -157,13 +157,13 @@
             <t t-set="is_portal" t-value="True"/>
 
             <div t-if="not no_breadcrumbs and not my_details and not breadcrumbs_searchbar" class="o_portal container mt-3">
-                <div class="d-flex justify-content-between align-items-center mb-2">
+                <div class="d-flex justify-content-between align-items-center">
                     <t t-call="portal.portal_breadcrumbs"/>
                     <t t-if="prev_record or next_record" t-call='portal.record_pager'/>
                 </div>
             </div>
             <div id="wrap" class='o_portal_wrap'>
-                <div class="container pt-3 pb-5">
+                <div class="container pt-3">
                     <t t-if="my_details">
                         <div class="wrapper col-12 d-flex flex-wrap justify-content-between align-items-center">
                             <h3 class="my-3">My account</h3>
@@ -175,7 +175,7 @@
                             </button>
                         </div>
                         <div class="row justify-content-between">
-                            <div t-attf-class="o_portal_content col-12 col-lg-8">
+                            <div t-attf-class="o_portal_content col-12 col-lg-8 mb-5">
                                 <t t-out="0"/>
                             </div>
                             <div class="d-none d-lg-flex justify-content-end col-lg-4">
@@ -282,7 +282,7 @@
 
     <template id="portal_record_sidebar" name="My Portal Record Sidebar">
         <div t-attf-class="#{classes}">
-            <div class="o_portal_sidebar_content sticky-lg-top d-lg-inline-block mb-4 mb-lg-0 p-3 p-lg-0" id="sidebar_content">
+            <div class="o_portal_sidebar_content d-lg-inline-block mb-4 mb-lg-0 p-3 p-lg-0" id="sidebar_content">
                 <div t-if="title" class="position-relative d-flex align-items-center justify-content-md-center justify-content-lg-between flex-wrap gap-2">
                     <t t-out="title"/>
                 </div>
diff --git a/addons/project/views/project_portal_project_task_templates.xml b/addons/project/views/project_portal_project_task_templates.xml
index f6458c06772..382af555e97 100644
--- a/addons/project/views/project_portal_project_task_templates.xml
+++ b/addons/project/views/project_portal_project_task_templates.xml
@@ -151,7 +151,7 @@
                 </t>
             </t>
 
-            <div class="row mt16 o_project_portal_sidebar">
+            <div class="row o_project_portal_sidebar">
                 <t t-call="portal.portal_record_sidebar">
                     <t t-set="classes" t-value="'col-lg-3 col-xl-4 d-print-none'"/>
 
@@ -251,14 +251,14 @@
                             </div>
 
                             <div class="row" t-if="task.description or task.attachment_ids">
-                                <div t-if="not is_html_empty(task.description)" t-attf-class="col-12 col-lg-7 mb-4 mb-md-0 {{'col-lg-7' if task.attachment_ids else 'col-lg-12'}}">
+                                <div t-if="not is_html_empty(task.description)" t-attf-class="col-12 mb-4 mb-md-0 {{'col-lg-6' if task.attachment_ids else 'col-lg-12'}}">
                                     <hr class="mb-1"/>
                                     <div class="d-flex my-2">
                                         <h5>Description</h5>
                                     </div>
                                     <div class="py-1 px-2 bg-100 small" t-field="task.description"/>
                                 </div>
-                                <div t-if="task.attachment_ids" t-attf-class="col-12 col-lg-5 o_project_portal_attachments {{'col-lg-5' if task.description else 'col-lg-12'}}">
+                                <div t-if="task.attachment_ids" t-attf-class="col-12 o_project_portal_attachments {{'col-lg-6' if task.description else 'col-lg-12'}}">
                                     <hr class="mb-1 d-none d-lg-block"/>
                                     <strong class="d-block mb-2">Attachments</strong>
                                     <div class="row">
diff --git a/addons/purchase/views/portal_templates.xml b/addons/purchase/views/portal_templates.xml
index dc73accbfe1..b17c520af39 100644
--- a/addons/purchase/views/portal_templates.xml
+++ b/addons/purchase/views/portal_templates.xml
@@ -134,7 +134,7 @@
               </t>
           </t>
 
-          <div class="row mt16 o_portal_purchase_sidebar">
+          <div class="row o_portal_purchase_sidebar">
               <!-- Sidebar -->
               <t t-call="portal.portal_record_sidebar">
                   <t t-set="classes" t-value="'col-lg-3 col-xl-4 d-print-none'"/>
diff --git a/addons/sale/i18n/sale.pot b/addons/sale/i18n/sale.pot
index 966c34bfef8..cc4a927c4c1 100644
--- a/addons/sale/i18n/sale.pot
+++ b/addons/sale/i18n/sale.pot
@@ -4,10 +4,9 @@
 #
 msgid ""
 msgstr ""
-"Project-Id-Version: Odoo Server 17.0\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-01-05 12:32+0000\n"
-"PO-Revision-Date: 2024-01-05 12:32+0000\n"
+"POT-Creation-Date: 2024-01-15 10:38+0000\n"
+"PO-Revision-Date: 2024-01-15 10:38+0000\n"
 "Last-Translator: \n"
 "Language-Team: \n"
 "MIME-Version: 1.0\n"
@@ -444,17 +443,12 @@ msgstr ""
 
 #. module: sale
 #: model_terms:ir.ui.view,arch_db:sale.sale_order_portal_content
-msgid "<i class=\"fa fa-fw fa-check\"/> <b>Authorized</b>"
+msgid "<i class=\"fa fa-fw fa-check\"/> Authorized"
 msgstr ""
 
 #. module: sale
 #: model_terms:ir.ui.view,arch_db:sale.sale_order_portal_content
-msgid "<i class=\"fa fa-fw fa-check\"/> <b>Paid</b>"
-msgstr ""
-
-#. module: sale
-#: model_terms:ir.ui.view,arch_db:sale.sale_order_portal_content
-msgid "<i class=\"fa fa-fw fa-clock-o\"/> <b>Waiting Payment</b>"
+msgid "<i class=\"fa fa-fw fa-check\"/> Paid"
 msgstr ""
 
 #. module: sale
@@ -462,6 +456,11 @@ msgstr ""
 msgid "<i class=\"fa fa-fw fa-clock-o\"/> Expired"
 msgstr ""
 
+#. module: sale
+#: model_terms:ir.ui.view,arch_db:sale.sale_order_portal_content
+msgid "<i class=\"fa fa-fw fa-clock-o\"/> Waiting Payment"
+msgstr ""
+
 #. module: sale
 #: model_terms:ir.ui.view,arch_db:sale.utm_campaign_view_kanban
 msgid "<i class=\"fa fa-fw fa-money me-1\" aria-label=\"Quotations\" role=\"img\"/>"
@@ -506,11 +505,6 @@ msgstr ""
 msgid "<small><b class=\"text-muted\">Your advantage</b></small>"
 msgstr ""
 
-#. module: sale
-#: model_terms:ir.ui.view,arch_db:sale.sale_order_portal_template
-msgid "<small><b>This offer expires on</b></small>"
-msgstr ""
-
 #. module: sale
 #: model_terms:ir.ui.view,arch_db:sale.portal_my_orders
 msgid ""
@@ -2294,7 +2288,6 @@ msgstr ""
 #: model:ir.actions.act_window,name:sale.action_invoice_salesteams
 #: model:ir.model.fields,field_description:sale.field_sale_order__invoice_ids
 #: model_terms:ir.ui.view,arch_db:sale.crm_team_view_kanban_dashboard
-#: model_terms:ir.ui.view,arch_db:sale.sale_order_portal_content
 #: model_terms:ir.ui.view,arch_db:sale.view_order_form
 msgid "Invoices"
 msgstr ""
@@ -2413,6 +2406,11 @@ msgstr ""
 msgid "Language"
 msgstr ""
 
+#. module: sale
+#: model_terms:ir.ui.view,arch_db:sale.sale_order_portal_content
+msgid "Last Invoices"
+msgstr ""
+
 #. module: sale
 #: model:ir.model.fields,field_description:sale.field_sale_advance_payment_inv__write_uid
 #: model:ir.model.fields,field_description:sale.field_sale_mass_cancel_orders__write_uid
@@ -3403,7 +3401,6 @@ msgstr ""
 
 #. module: sale
 #: model_terms:ir.ui.view,arch_db:sale.report_saleorder_document
-#: model_terms:ir.ui.view,arch_db:sale.sale_order_portal_content
 msgid "Quotation Date:"
 msgstr ""
 
diff --git a/addons/sale/views/sale_portal_templates.xml b/addons/sale/views/sale_portal_templates.xml
index ce93d47ce2e..f578dae1407 100644
--- a/addons/sale/views/sale_portal_templates.xml
+++ b/addons/sale/views/sale_portal_templates.xml
@@ -133,7 +133,7 @@
                 <t t-call="portal.portal_back_in_edit_mode"/>
             </t>
 
-            <div class="row mt-3 o_portal_sale_sidebar">
+            <div class="row o_portal_sale_sidebar">
                 <!-- Sidebar -->
                 <t t-call="portal.portal_record_sidebar" id="sale_order_portal_sidebar">
                     <t t-set="classes" t-value="'d-print-none col-lg-3 col-xl-4'"/>
@@ -162,10 +162,6 @@
                             </div>
 
                             <t t-if="not sale_order.is_expired and sale_order.state in ['draft', 'sent']">
-                                <div t-if="sale_order.validity_date">
-                                    <small><b>This offer expires on</b></small>
-                                    <div t-field="sale_order.validity_date"></div>
-                                </div>
                                 <div t-if="sale_order.amount_undiscounted - sale_order.amount_untaxed &gt; 0.01" class="list-group-item flex-grow-1">
                                     <small><b class="text-muted">Your advantage</b></small>
                                     <small>
@@ -436,24 +432,24 @@
                     </div>
                 </span>
                 <!-- Information -->
-                <div id="sale_info" class="col-12 col-lg-5 mb-4">
+                <div id="sale_info" class="col-12 col-lg-6 mb-4">
                     <span id="sale_info_title">
-                        <h5 class="mb-1">Sale Information</h5>
-                        <hr class="my-0"/>
+                        <h4 class="mb-1">Sale Information</h4>
+                        <hr class="mt-1 mb-2"/>
                     </span>
                     <table class="table table-borderless table-sm">
                         <tbody style="white-space:nowrap" id="sale_info_table">
                             <tr>
-                                <th t-if="sale_order.state in ['sale', 'cancel']" class="text-end pb-0">Order Date:</th>
-                                <th t-else="" class="text-end pb-0">Quotation Date:</th>
+                                <th t-if="sale_order.state in ['sale', 'cancel']" class="ps-0 pb-0">Order Date:</th>
+                                <th t-else="" class="ps-0 pb-0">Date:</th>
                                 <td class="w-100 pb-0 text-wrap"><span t-field="sale_order.date_order" t-options='{"widget": "date"}'/></td>
                             </tr>
                             <tr t-if="sale_order.validity_date">
-                                <th class="text-end pb-0">Expiration Date:</th>
+                                <th class="ps-0 pb-0">Expiration Date:</th>
                                 <td class="w-100 pb-0 text-wrap"><span t-field="sale_order.validity_date" t-options='{"widget": "date"}'/></td>
                             </tr>
                             <tr t-if="sale_order.client_order_ref">
-                                <th class="text-end pb-0">Your Reference:</th>
+                                <th class="ps-0 pb-0">Your Reference:</th>
                                 <td class="w-100 pb-0 text-wrap"><span t-field="sale_order.client_order_ref"/></td>
                             </tr>
                         </tbody>
@@ -461,8 +457,8 @@
                 </div>
 
                 <!-- ======  Customer Information  ====== -->
-                <div id="customer_info" class="col-12 col-lg-7 mb-4">
-                    <h5 class="mb-1">
+                <div id="customer_info" class="col-12 col-lg-6 mb-4">
+                    <h4 class="mb-1">
                         <t t-if="sale_order.partner_shipping_id == sale_order.partner_invoice_id">
                             Invoicing and Shipping Address
                         </t>
@@ -474,57 +470,51 @@
                                 <i class="fa fa-fw fa-pencil"/>
                             </a>
                         </small>
-                    </h5>
-                    <hr class="my-0"/>
+                    </h4>
+                    <hr class="mt-1 mb-2"/>
                     <div t-field="sale_order.partner_id" t-options="{ 'widget': 'contact', 'fields': [ 'name', 'address', 'phone', 'email']}"/>
                     <span t-if="sale_order.partner_shipping_id != sale_order.partner_invoice_id"
                             id="shipping_address"
                             class="col-lg-6">
                         <br/>
-                        <h5 class="mb-1">
+                        <h4 class="mb-1">
                             Shipping Address
-                        </h5>
-                        <hr class="my-0"/>
+                        </h4>
+                        <hr class="mt-1 mb-2"/>
                         <div t-field="sale_order.partner_shipping_id" t-options='{ "widget": "contact", "fields": [ "name", "address"]}'/>
                     </span>
                 </div>
                 <t t-set="invoices" t-value="sale_order.invoice_ids.filtered(lambda i: i.state not in ['draft', 'cancel']).sorted('date', reverse=True)[:3]"/>
-                <div id="sale_invoices" t-if="invoices and sale_order.state in ['sale', 'cancel']">
-                    <div class="col-12 col-lg-5 mb-4">
-                        <h5 class="mb-1">Invoices</h5>
-                        <hr class="my-0"/>
-                        <table>
-                            <tbody>
-                                <t t-foreach="invoices" t-as="i">
-                                    <t t-set="report_url" t-value="i.get_portal_url()"/>
-                                    <t t-set="authorized_tx_ids" t-value="i.authorized_transaction_ids"/>
-                                    <tr class="w-100 pb-0">
-                                        <td>
-                                            <a t-att-href="report_url">
-                                                <span t-out="i.name"/>
-                                            </a>
-                                            <div class="small d-lg-inline-block">Date: <span class="text-muted" t-field="i.invoice_date"/></div>
-                                        </td>
-                                        <td t-if="i.payment_state in ('paid', 'in_payment')" class="small badge text-bg-success orders_label_text_align">
-                                            <i class="fa fa-fw fa-check"/> <b>Paid</b>
-                                        </td>
-                                        <td t-elif="authorized_tx_ids" class="small badge text-bg-success orders_label_text_align">
-                                            <i class="fa fa-fw fa-check"/> <b>Authorized</b>
-                                        </td>
-                                        <td t-else="" class="small badge text-bg-info orders_label_text_align">
-                                            <i class="fa fa-fw fa-clock-o"/> <b>Waiting Payment</b>
-                                        </td>
-                                    </tr>
-                                </t>
-                            </tbody>
-                        </table>
-                    </div>
+                <div id="sale_invoices" t-if="invoices and sale_order.state in ['sale', 'cancel']" class="col-12 col-lg-6 mb-4">
+                    <h4 class="mb-1">Last Invoices</h4>
+                    <hr class="mt-1 mb-2"/>
+                    <t t-foreach="invoices" t-as="i">
+                        <t t-set="report_url" t-value="i.get_portal_url()"/>
+                        <t t-set="authorized_tx_ids" t-value="i.authorized_transaction_ids"/>
+                        <div class="d-flex flex-column">
+                            <div class="d-flex align-items-center justify-content-between">
+                                <a t-att-href="report_url">
+                                    <span t-out="i.name"/>
+                                </a>
+                                <div t-if="i.payment_state in ('paid', 'in_payment')" class="small badge text-bg-success orders_label_text_align">
+                                    <i class="fa fa-fw fa-check"/> Paid
+                                </div>
+                                <div t-elif="authorized_tx_ids" class="small badge text-bg-success orders_label_text_align">
+                                    <i class="fa fa-fw fa-check"/> Authorized
+                                </div>
+                                <div t-else="" class="small badge text-bg-info orders_label_text_align">
+                                    <i class="fa fa-fw fa-clock-o"/> Waiting Payment
+                                </div>
+                            </div>
+                            <div class="small d-lg-inline-block">Date: <span class="text-muted" t-field="i.invoice_date"/></div>
+                        </div>
+                    </t>
                 </div>
             </div>
 
             <section id="details" style="page-break-inside: auto;">
                 <t t-if="product_documents">
-                    <h3 id="details">Documents</h3>
+                    <h4 id="details">Documents</h4>
                     <div class="d-flex flex-grow-1 flex-wrap gap-1 mb32">
                         <t t-foreach="product_documents" t-as="document_sudo">
                             <div class="bg-light p-2 rounded">
@@ -543,7 +533,6 @@
                         </t>
                     </div>
                 </t>
-                <h3 id="details_title">Order Detail</h3>
 
                 <t t-set="display_discount" t-value="True in [line.discount > 0 for line in sale_order.order_line]"/>
 
@@ -654,8 +643,9 @@
                 </div>
             </section>
 
-            <section t-if="not is_html_empty(sale_order.note)" id="terms" class="mt-5">
-                <h3 class="">Terms &amp; Conditions</h3>
+            <section t-if="not is_html_empty(sale_order.note)" id="terms" class="mt-4">
+                <h4 class="">Terms &amp; Conditions</h4>
+                <hr class="mt-0 mb-1"/>
                 <t t-if="sale_order.terms_type == 'html'">
                     <!-- Note is plain text. This ensures a clickable link  -->
                     <t t-set="tc_url" t-value="'%s/terms' % (sale_order.get_base_url())"/>
@@ -666,8 +656,8 @@
                 </t>
             </section>
 
-            <section t-if="sale_order.payment_term_id" class="mt-5">
-                <h3 class="">Payment terms</h3>
+            <section t-if="sale_order.payment_term_id" class="mt-4">
+                <h4 class="">Payment terms</h4>
                 <hr class="mt-0 mb-1"/>
                 <span t-field="sale_order.payment_term_id"/>
             </section>
diff --git a/addons/sale_stock/i18n/sale_stock.pot b/addons/sale_stock/i18n/sale_stock.pot
index 52f67abeec0..2298e766f14 100644
--- a/addons/sale_stock/i18n/sale_stock.pot
+++ b/addons/sale_stock/i18n/sale_stock.pot
@@ -4,10 +4,9 @@
 #
 msgid ""
 msgstr ""
-"Project-Id-Version: Odoo Server 17.0\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-01-05 12:32+0000\n"
-"PO-Revision-Date: 2024-01-05 12:32+0000\n"
+"POT-Creation-Date: 2024-01-15 10:37+0000\n"
+"PO-Revision-Date: 2024-01-15 10:37+0000\n"
 "Last-Translator: \n"
 "Language-Team: \n"
 "MIME-Version: 1.0\n"
@@ -24,7 +23,7 @@ msgstr ""
 
 #. module: sale_stock
 #: model_terms:ir.ui.view,arch_db:sale_stock.sale_order_portal_content_inherit_sale_stock
-msgid "<i class=\"fa fa-fw fa-clock-o\"/> <b>Awaiting arrival</b>"
+msgid "<i class=\"fa fa-fw fa-clock-o\"/> Awaiting arrival"
 msgstr ""
 
 #. module: sale_stock
@@ -34,7 +33,7 @@ msgstr ""
 
 #. module: sale_stock
 #: model_terms:ir.ui.view,arch_db:sale_stock.sale_order_portal_content_inherit_sale_stock
-msgid "<i class=\"fa fa-fw fa-times\"/> <b>Cancelled</b>"
+msgid "<i class=\"fa fa-fw fa-times\"/> Cancelled"
 msgstr ""
 
 #. module: sale_stock
@@ -44,7 +43,7 @@ msgstr ""
 
 #. module: sale_stock
 #: model_terms:ir.ui.view,arch_db:sale_stock.sale_order_portal_content_inherit_sale_stock
-msgid "<i class=\"fa fa-fw fa-truck\"/> <b>Received</b>"
+msgid "<i class=\"fa fa-fw fa-truck\"/> Received"
 msgstr ""
 
 #. module: sale_stock
@@ -56,8 +55,8 @@ msgstr ""
 #: model_terms:ir.ui.view,arch_db:sale_stock.sale_order_portal_content_inherit_sale_stock
 msgid ""
 "<span class=\"small badge text-bg-success orders_label_text_align\">\n"
-"                                    <i class=\"fa fa-fw fa-truck\"/> <b>Shipped</b>\n"
-"                                </span>"
+"                                        <i class=\"fa fa-fw fa-truck\"/> Shipped\n"
+"                                    </span>"
 msgstr ""
 
 #. module: sale_stock
@@ -79,11 +78,6 @@ msgstr ""
 msgid "<strong>Incoterm:</strong>"
 msgstr ""
 
-#. module: sale_stock
-#: model_terms:ir.ui.view,arch_db:sale_stock.sale_order_portal_content_inherit_sale_stock
-msgid "<strong>Returns</strong>"
-msgstr ""
-
 #. module: sale_stock
 #: model:ir.model.fields,help:sale_stock.field_sale_order_line__qty_delivered_method
 msgid ""
@@ -179,7 +173,6 @@ msgstr ""
 
 #. module: sale_stock
 #: model:ir.model.fields,field_description:sale_stock.field_sale_order__delivery_count
-#: model_terms:ir.ui.view,arch_db:sale_stock.sale_order_portal_content_inherit_sale_stock
 msgid "Delivery Orders"
 msgstr ""
 
@@ -345,6 +338,11 @@ msgstr ""
 msgid "Journal Item"
 msgstr ""
 
+#. module: sale_stock
+#: model_terms:ir.ui.view,arch_db:sale_stock.sale_order_portal_content_inherit_sale_stock
+msgid "Last Delivery Orders"
+msgstr ""
+
 #. module: sale_stock
 #: model:ir.model.fields,field_description:sale_stock.field_sale_order_line__customer_lead
 msgid "Lead Time"
@@ -485,6 +483,11 @@ msgstr ""
 msgid "Reserved"
 msgstr ""
 
+#. module: sale_stock
+#: model_terms:ir.ui.view,arch_db:sale_stock.sale_order_portal_content_inherit_sale_stock
+msgid "Returns"
+msgstr ""
+
 #. module: sale_stock
 #: model:ir.model.fields,field_description:sale_stock.field_sale_order_line__route_id
 msgid "Route"
diff --git a/addons/sale_stock/views/sale_stock_portal_template.xml b/addons/sale_stock/views/sale_stock_portal_template.xml
index 2987c5d764b..cdb91284ca8 100644
--- a/addons/sale_stock/views/sale_stock_portal_template.xml
+++ b/addons/sale_stock/views/sale_stock_portal_template.xml
@@ -6,7 +6,7 @@
         inherit_id="sale.sale_order_portal_content">
         <tbody id="sale_info_table" position="inside">
             <tr t-if="sale_order.incoterm">
-                <th class="text-end pb-0">Incoterm:</th>
+                <th class="pb-0">Incoterm:</th>
                 <td class="w-100 pb-0 text-wrap">
                     <p t-if="sale_order.incoterm_location">
                         <span t-field="sale_order.incoterm.code"/> <br/>
@@ -19,93 +19,89 @@
 
         <div id="sale_invoices" position="after">
             <t t-set="delivery_orders" t-value="sale_order.picking_ids.filtered(lambda picking: picking.picking_type_id.code == 'outgoing').sorted('date', reverse=True)[:3]"/>
-            <div t-if="delivery_orders" class="col-12 col-lg-7 mb-4">
-                <h5 class="mb-1">Delivery Orders</h5>
-                <hr class="my-0"/>
+            <div t-if="delivery_orders" class="col-12 col-lg-6 mb-4">
+                <h4 class="mb-1">Last Delivery Orders</h4>
+                <hr class="mt-1 mb-2"/>
                 <div>
                     <t t-foreach="delivery_orders" t-as="picking">
                         <t t-set="delivery_report_url"
                            t-value="'/my/picking/pdf/%s?%s' % (picking.id, keep_query())"/>
                         <div name="delivery_order"
-                            class="d-flex flex-wrap align-items-center">
-                            <div name="delivery_details">
+                            class="d-flex flex-column">
+                            <div name="delivery_details" class="d-flex align-items-center justify-content-between">
                                 <a t-att-href="delivery_report_url">
                                     <span t-esc="picking.name"/>
                                 </a>
-                                <div class="small d-lg-inline-block ms-3" t-if="picking.date_done or picking.scheduled_date">
-                                    Date:
-                                    <span class="text-muted"
-                                          t-field="picking.date_done"
-                                          t-options="{'date_only': True}"/>
-                                    <span t-if="picking.state in ['draft', 'waiting', 'confirmed', 'assigned']"
-                                          class="text-muted"
-                                          t-field="picking.scheduled_date"
-                                          t-options="{'date_only': True}"/>
+                                <div t-if="picking.state == 'done'">
+                                    <span class="small badge text-bg-success orders_label_text_align">
+                                        <i class="fa fa-fw fa-truck"/> Shipped
+                                    </span>
+                                    <a class="badge text-bg-secondary orders_label_text_align" target="_blank"
+                                        t-att-href="'/my/picking/return/pdf/%s?%s' % (picking.id, keep_query())">
+                                        RETURN
+                                    </a>
                                 </div>
-                            </div>
-                            <div t-if="picking.state == 'done'">
-                                <span class="small badge text-bg-success orders_label_text_align">
-                                    <i class="fa fa-fw fa-truck"/> <b>Shipped</b>
+                                <span t-elif="picking.state == 'cancel'"
+                                    class="small badge text-bg-danger orders_label_text_align">
+                                    <i class="fa fa-fw fa-times"/>Cancelled
+                                </span>
+                                <span t-elif="picking.state in ['draft', 'waiting', 'confirmed', 'assigned']"
+                                    class="small badge text-bg-info orders_label_text_align">
+                                    <i class="fa fa-fw fa-clock-o"/>Preparation
                                 </span>
-                                <a class="badge text-bg-secondary orders_label_text_align" target="_blank"
-                                   t-att-href="'/my/picking/return/pdf/%s?%s' % (picking.id, keep_query())">
-                                    RETURN
-                                </a>
                             </div>
-                            <span t-elif="picking.state == 'cancel'"
-                                class="small badge text-bg-danger orders_label_text_align">
-                                <i class="fa fa-fw fa-times"/>Cancelled
-                            </span>
-                            <span t-elif="picking.state in ['draft', 'waiting', 'confirmed', 'assigned']"
-                                class="small badge text-bg-info orders_label_text_align">
-                                <i class="fa fa-fw fa-clock-o"/>Preparation
-                            </span>
+                            <div class="small d-lg-inline-block" t-if="picking.date_done or picking.scheduled_date">
+                                Date:
+                                <span class="text-muted"
+                                        t-field="picking.date_done"
+                                        t-options="{'date_only': True}"/>
+                                <span t-if="picking.state in ['draft', 'waiting', 'confirmed', 'assigned']"
+                                        class="text-muted"
+                                        t-field="picking.scheduled_date"
+                                        t-options="{'date_only': True}"/>
+                            </div>
                         </div>
                     </t>
                 </div>
             </div>
             <t t-set="returns" t-value="sale_order.picking_ids.filtered(lambda picking: picking.picking_type_id.code == 'incoming')"/>
-            <t t-if="returns">
-                <div class="mt-4">
-                    <strong>Returns</strong>
-                </div>
-                <div>
-                    <t t-foreach="returns" t-as="picking">
-                        <t t-set="delivery_report_url"
-                           t-value="'/my/picking/pdf/%s?%s' % (picking.id, keep_query())"/>
-                        <div name="return"
-                            class="d-flex flex-wrap align-items-center justify-content-between">
-                            <div name="return_details">
-                                <a t-att-href="delivery_report_url">
-                                    <span t-esc="picking.name"/>
-                                </a>
-                                <div class="small d-lg-inline-block ms-3">
-                                    Date:
-                                    <span class="text-muted"
-                                        t-field="picking.date_done"
-                                        t-options="{'date_only': True}"/>
-                                    <span t-if="picking.state in ['draft', 'waiting', 'confirmed', 'assigned']"
-                                        class="text-muted"
-                                        t-field="picking.scheduled_date"
-                                        t-options="{'date_only': True}"/>
-                                </div>
-                            </div>
+            <div t-if="returns" class="col-12 col-lg-6 mb-4">
+                <h4 class="mb-1">Returns</h4>
+                <hr class="mt-1 mb-2"/>
+                <t t-foreach="returns" t-as="picking">
+                    <t t-set="delivery_report_url"
+                        t-value="'/my/picking/pdf/%s?%s' % (picking.id, keep_query())"/>
+                    <div name="return">
+                        <div name="return_details" class="d-flex justify-content-between align-items-center">
+                            <a t-att-href="delivery_report_url">
+                                <span t-esc="picking.name"/>
+                            </a>
                             <span t-if="picking.state == 'done'"
-                                  class="small badge text-bg-success orders_label_text_align">
-                                <i class="fa fa-fw fa-truck"/> <b>Received</b>
+                                class="small badge text-bg-success orders_label_text_align">
+                                <i class="fa fa-fw fa-truck"/> Received
                             </span>
                             <span t-elif="picking.state == 'cancel'"
                                 class="small badge text-bg-danger orders_label_text_align">
-                                <i class="fa fa-fw fa-times"/> <b>Cancelled</b>
+                                <i class="fa fa-fw fa-times"/> Cancelled
                             </span>
                             <span t-elif="picking.state in ['draft', 'waiting', 'confirmed', 'assigned']"
                                 class="small badge text-bg-info orders_label_text_align">
-                                <i class="fa fa-fw fa-clock-o"/> <b>Awaiting arrival</b>
+                                <i class="fa fa-fw fa-clock-o"/> Awaiting arrival
                             </span>
                         </div>
-                    </t>
-                </div>
-            </t>
+                        <div class="small d-lg-inline-block">
+                            Date:
+                            <span class="text-muted"
+                                t-field="picking.date_done"
+                                t-options="{'date_only': True}"/>
+                            <span t-if="picking.state in ['draft', 'waiting', 'confirmed', 'assigned']"
+                                class="text-muted"
+                                t-field="picking.scheduled_date"
+                                t-options="{'date_only': True}"/>
+                        </div>
+                    </div>
+                </t>
+            </div>
         </div>
     </template>