diff --git a/addons/purchase/views/portal_templates.xml b/addons/purchase/views/portal_templates.xml
index ef3404d2b61..cd7140aa430 100644
--- a/addons/purchase/views/portal_templates.xml
+++ b/addons/purchase/views/portal_templates.xml
@@ -255,100 +255,102 @@
           <section id="details" style="page-break-inside: auto;" class="mt32">
               <h3 id="details">Pricing</h3>
 
-              <table t-att-data-order-id="order.id" t-att-data-token="order.access_token" class="table table-sm" id="purchase_order_table">
-                  <thead class="bg-100">
-                      <tr>
-                          <th class="text-start">Products</th>
-                          <th class="text-end">Quantity</th>
-                          <th t-if="update_dates" class="text-end">Scheduled Date</th>
-                          <th t-if="update_dates" class="text-end"><strong>Update Here</strong></th>
-                          <th t-if="not update_dates and order.state in ['purchase', 'done']" t-attf-class="text-end {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">Unit Price</th>
-                          <th t-if="not update_dates and order.state in ['purchase', 'done']" t-attf-class="text-end {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
-                              <span>Taxes</span>
-                          </th>
-                          <th class="text-end" t-if="order.state in ['purchase', 'done']" >
-                              <span groups="account.group_show_line_subtotals_tax_excluded">Amount</span>
-                              <span groups="account.group_show_line_subtotals_tax_included">Total Price</span>
-                          </th>
-                      </tr>
-                  </thead>
-                  <tbody class="purchase_tbody">
+              <div class="table-responsive">
+                <table t-att-data-order-id="order.id" t-att-data-token="order.access_token" class="table table-sm" id="purchase_order_table">
+                    <thead class="bg-100">
+                        <tr>
+                            <th class="text-start">Products</th>
+                            <th class="text-end">Quantity</th>
+                            <th t-if="update_dates" class="text-end">Scheduled Date</th>
+                            <th t-if="update_dates" class="text-end"><strong>Update Here</strong></th>
+                            <th t-if="not update_dates and order.state in ['purchase', 'done']" t-attf-class="text-end {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">Unit Price</th>
+                            <th t-if="not update_dates and order.state in ['purchase', 'done']" t-attf-class="text-end {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
+                                <span>Taxes</span>
+                            </th>
+                            <th class="text-end" t-if="order.state in ['purchase', 'done']" >
+                                <span groups="account.group_show_line_subtotals_tax_excluded">Amount</span>
+                                <span groups="account.group_show_line_subtotals_tax_included">Total Price</span>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody class="purchase_tbody">
 
-                      <t t-set="current_subtotal" t-value="0"/>
+                          <t t-set="current_subtotal" t-value="0"/>
 
-                      <t t-foreach="order.order_line" t-as="line">
+                          <t t-foreach="order.order_line" t-as="line">
 
-                          <t t-set="current_subtotal" t-value="current_subtotal + line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
-                          <t t-set="current_subtotal" t-value="current_subtotal + line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
+                              <t t-set="current_subtotal" t-value="current_subtotal + line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
+                              <t t-set="current_subtotal" t-value="current_subtotal + line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
 
-                          <tr t-att-class="'bg-200 fw-bold o_line_section' if line.display_type == 'line_section' else 'fst-italic text-break' if line.display_type == 'line_note' else ''">
-                              <t t-if="not line.display_type">
-                                  <td id="product_name">
-                                      <img t-att-src="image_data_uri(resize_to_48(line.product_id.image_1024))" alt="Product" class="d-none d-lg-inline"/>
-                                      <span t-field="line.name"/>
-                                  </td>
-                                  <td class="text-end">
-                                      <div id="quote_qty">
-                                          <span t-field="line.product_qty"/>
-                                          <span t-field="line.product_uom" groups="uom.group_uom"/>
-                                      </div>
-                                  </td>
-                                  <td t-if="update_dates" class="text-end"><span t-esc="line.date_planned.date()"/></td>
-                                  <td t-if="update_dates" class="text-end">
-                                    <form t-attf-action="/my/purchase/#{order.id}/update?access_token=#{order.access_token}" method="post">
-                                      <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
-                                      <div class="container">
-                                        <div class="mb-3">
-                                          <div class="input-group date">
-                                              <input type="text" class="form-control datetimepicker-input o-purchase-datetimepicker" t-attf-id="datetimepicker_#{line.id}" t-att-name="line.id"
-                                                data-toggle="datetimepicker" data-date-format="YYYY-MM-DD" t-attf-data-target="#datetimepicker_#{line.id}"/>
+                            <tr t-att-class="'bg-200 fw-bold o_line_section' if line.display_type == 'line_section' else 'fst-italic text-break' if line.display_type == 'line_note' else ''">
+                                <t t-if="not line.display_type">
+                                    <td id="product_name">
+                                        <img t-att-src="image_data_uri(resize_to_48(line.product_id.image_1024))" alt="Product" class="d-none d-lg-inline"/>
+                                        <span t-field="line.name"/>
+                                    </td>
+                                    <td class="text-end">
+                                        <div id="quote_qty">
+                                            <span t-field="line.product_qty"/>
+                                            <span t-field="line.product_uom" groups="uom.group_uom"/>
+                                        </div>
+                                    </td>
+                                    <td t-if="update_dates" class="text-end"><span t-esc="line.date_planned.date()"/></td>
+                                    <td t-if="update_dates" class="text-end">
+                                      <form t-attf-action="/my/purchase/#{order.id}/update?access_token=#{order.access_token}" method="post">
+                                        <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
+                                        <div class="container">
+                                          <div class="mb-3">
+                                            <div class="input-group date">
+                                                <input type="text" class="form-control datetimepicker-input o-purchase-datetimepicker" t-attf-id="datetimepicker_#{line.id}" t-att-name="line.id"
+                                                  data-toggle="datetimepicker" data-date-format="YYYY-MM-DD" t-attf-data-target="#datetimepicker_#{line.id}"/>
+                                            </div>
                                           </div>
                                         </div>
-                                      </div>
-                                    </form>
-                                  </td>
-                                  <td t-if="not update_dates and order.state in ['purchase', 'done']" t-attf-class="text-end {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">
-                                      <div
-                                          t-field="line.price_unit"
-                                          class="text-end"
-                                      />
-                                  </td>
-                                  <td t-if="not update_dates and order.state in ['purchase', 'done']" t-attf-class="text-end {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
-                                      <span t-esc="', '.join(map(lambda x: (x.description or x.name), line.taxes_id))"/>
-                                  </td>
-                                  <td class="text-end" t-if="not update_dates and order.state in ['purchase', 'done']">
-                                      <span class="oe_order_line_price_subtotal" t-field="line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
-                                      <span class="oe_order_line_price_total" t-field="line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
-                                  </td>
-                              </t>
-                              <t t-if="line.display_type == 'line_section'">
-                                  <td colspan="99">
-                                      <span t-field="line.name"/>
-                                  </td>
-                                  <t t-set="current_section" t-value="line"/>
-                                  <t t-set="current_subtotal" t-value="0"/>
-                              </t>
-                              <t t-if="line.display_type == 'line_note'">
-                                  <td colspan="99">
-                                      <span t-field="line.name"/>
-                                  </td>
-                              </t>
-                          </tr>
+                                      </form>
+                                    </td>
+                                    <td t-if="not update_dates and order.state in ['purchase', 'done']" t-attf-class="text-end {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">
+                                        <div
+                                            t-field="line.price_unit"
+                                            class="text-end"
+                                        />
+                                    </td>
+                                    <td t-if="not update_dates and order.state in ['purchase', 'done']" t-attf-class="text-end {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
+                                        <span t-esc="', '.join(map(lambda x: (x.description or x.name), line.taxes_id))"/>
+                                    </td>
+                                    <td class="text-end" t-if="not update_dates and order.state in ['purchase', 'done']">
+                                        <span class="oe_order_line_price_subtotal" t-field="line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
+                                        <span class="oe_order_line_price_total" t-field="line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
+                                    </td>
+                                </t>
+                                <t t-if="line.display_type == 'line_section'">
+                                    <td colspan="99">
+                                        <span t-field="line.name"/>
+                                    </td>
+                                    <t t-set="current_section" t-value="line"/>
+                                    <t t-set="current_subtotal" t-value="0"/>
+                                </t>
+                                <t t-if="line.display_type == 'line_note'">
+                                    <td colspan="99">
+                                        <span t-field="line.name"/>
+                                    </td>
+                                </t>
+                            </tr>
 
-                          <t t-if="current_section and (line_last or order.order_line[line_index+1].display_type == 'line_section') and order.state in ['purchase', 'done']">
-                              <tr class="is-subtotal text-end">
-                                  <td colspan="99">
-                                      <strong class="mr16">Subtotal</strong>
-                                      <span
-                                          t-esc="current_subtotal"
-                                          t-options='{"widget": "monetary", "display_currency": order.currency_id}'
-                                      />
-                                  </td>
-                              </tr>
-                          </t>
-                      </t>
-                  </tbody>
-              </table>
+                            <t t-if="current_section and (line_last or order.order_line[line_index+1].display_type == 'line_section') and order.state in ['purchase', 'done']">
+                                <tr class="is-subtotal text-end">
+                                    <td colspan="99">
+                                        <strong class="mr16">Subtotal</strong>
+                                        <span
+                                            t-esc="current_subtotal"
+                                            t-options='{"widget": "monetary", "display_currency": order.currency_id}'
+                                        />
+                                    </td>
+                                </tr>
+                            </t>
+                        </t>
+                    </tbody>
+                </table>
+              </div>
 
               <div id="total" t-if="order.state in ['purchase', 'done']" class="row" name="total" style="page-break-inside: avoid;">
                   <div t-attf-class="#{'col-4' if report_type != 'html' else 'col-sm-7 col-md-5'} ms-auto">
diff --git a/addons/sale/views/sale_portal_templates.xml b/addons/sale/views/sale_portal_templates.xml
index 0fd5c1df2f0..e51a49d5657 100644
--- a/addons/sale/views/sale_portal_templates.xml
+++ b/addons/sale/views/sale_portal_templates.xml
@@ -463,96 +463,98 @@
 
                 <t t-set="display_discount" t-value="True in [line.discount > 0 for line in sale_order.order_line]"/>
 
-                <table t-att-data-order-id="sale_order.id" t-att-data-token="sale_order.access_token" class="table table-sm" id="sales_order_table">
-                    <thead class="bg-100">
-                        <tr>
-                            <th class="text-start" id="product_name_header">Products</th>
-                            <th class="text-end">Quantity</th>
-                            <th t-attf-class="text-end {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">
-                                Unit Price
-                            </th>
-                            <th t-if="display_discount" t-attf-class="text-end {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">
-                                <span>Disc.%</span>
-                            </th>
-                            <th t-attf-class="text-end {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
-                                <span>Taxes</span>
-                            </th>
-                            <th class="text-end" >
-                                <span groups="account.group_show_line_subtotals_tax_excluded">Amount</span>
-                                <span groups="account.group_show_line_subtotals_tax_included">Total Price</span>
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody class="sale_tbody">
+                <div class="table-responsive">
+                    <table t-att-data-order-id="sale_order.id" t-att-data-token="sale_order.access_token" class="table table-sm" id="sales_order_table">
+                        <thead class="bg-100">
+                            <tr>
+                                <th class="text-start" id="product_name_header">Products</th>
+                                <th class="text-end">Quantity</th>
+                                <th t-attf-class="text-end {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">
+                                    Unit Price
+                                </th>
+                                <th t-if="display_discount" t-attf-class="text-end {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">
+                                    <span>Disc.%</span>
+                                </th>
+                                <th t-attf-class="text-end {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
+                                    <span>Taxes</span>
+                                </th>
+                                <th class="text-end" >
+                                    <span groups="account.group_show_line_subtotals_tax_excluded">Amount</span>
+                                    <span groups="account.group_show_line_subtotals_tax_included">Total Price</span>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody class="sale_tbody">
 
-                        <t t-set="current_subtotal" t-value="0"/>
-                        <t t-set="lines_to_report" t-value="sale_order._get_order_lines_to_report()"/>
+                            <t t-set="current_subtotal" t-value="0"/>
+                            <t t-set="lines_to_report" t-value="sale_order._get_order_lines_to_report()"/>
 
-                        <t t-foreach="lines_to_report" t-as="line">
+                            <t t-foreach="lines_to_report" t-as="line">
 
-                            <t t-set="current_subtotal" t-value="current_subtotal + line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
-                            <t t-set="current_subtotal" t-value="current_subtotal + line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
+                                    <t t-set="current_subtotal" t-value="current_subtotal + line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
+                                    <t t-set="current_subtotal" t-value="current_subtotal + line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
 
-                            <tr t-att-class="'bg-200 fw-bold o_line_section' if line.display_type == 'line_section' else 'fst-italic o_line_note' if line.display_type == 'line_note' else ''">
-                                <t t-if="not line.display_type">
-                                    <td id="product_name">
-                                        <span t-field="line.name"/>
-                                    </td>
-                                    <td class="text-end">
-                                        <div id="quote_qty">
-                                            <span t-field="line.product_uom_qty"/>
-                                            <span t-field="line.product_uom"/>
-                                        </div>
-                                    </td>
-                                    <td t-attf-class="text-end {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">
-                                        <div
-                                            t-if="line.discount &gt;= 0"
-                                            t-field="line.price_unit"
-                                            t-att-style="line.discount and 'text-decoration: line-through' or None"
-                                            t-att-class="(line.discount and 'text-danger' or '') + ' text-end'"
+                                <tr t-att-class="'bg-200 fw-bold o_line_section' if line.display_type == 'line_section' else 'fst-italic o_line_note' if line.display_type == 'line_note' else ''">
+                                    <t t-if="not line.display_type">
+                                        <td id="product_name">
+                                            <span t-field="line.name"/>
+                                        </td>
+                                        <td class="text-end">
+                                            <div id="quote_qty">
+                                                <span t-field="line.product_uom_qty"/>
+                                                <span t-field="line.product_uom"/>
+                                            </div>
+                                        </td>
+                                        <td t-attf-class="text-end {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">
+                                            <div
+                                                t-if="line.discount &gt;= 0"
+                                                t-field="line.price_unit"
+                                                t-att-style="line.discount and 'text-decoration: line-through' or None"
+                                                t-att-class="(line.discount and 'text-danger' or '') + ' text-end'"
+                                            />
+                                            <div t-if="line.discount">
+                                                <t t-out="(1-line.discount / 100.0) * line.price_unit" t-options='{"widget": "float", "decimal_precision": "Product Price"}'/>
+                                            </div>
+                                        </td>
+                                        <td t-if="display_discount" t-attf-class="text-end {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">
+                                            <strong t-if="line.discount &gt; 0" class="text-info">
+                                                <t t-out="((line.discount % 1) and '%s' or '%d') % line.discount"/>%
+                                            </strong>
+                                        </td>
+                                        <td t-attf-class="text-end {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
+                                            <span t-out="', '.join(map(lambda x: (x.description or x.name), line.tax_id))"/>
+                                        </td>
+                                        <td t-if="not line.is_downpayment" class="text-end">
+                                            <span class="oe_order_line_price_subtotal" t-field="line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
+                                            <span class="oe_order_line_price_total" t-field="line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
+                                        </td>
+                                    </t>
+                                    <t t-if="line.display_type == 'line_section'">
+                                        <td colspan="99">
+                                            <span t-field="line.name"/>
+                                        </td>
+                                        <t t-set="current_section" t-value="line"/>
+                                        <t t-set="current_subtotal" t-value="0"/>
+                                    </t>
+                                    <t t-if="line.display_type == 'line_note'">
+                                        <td colspan="99">
+                                            <span t-field="line.name"/>
+                                        </td>
+                                    </t>
+                                </tr>
+                                <tr t-if="current_section and (line_last or lines_to_report[line_index+1].display_type == 'line_section') and not line.is_downpayment"
+                                    class="is-subtotal text-end">
+                                    <td colspan="99">
+                                        <strong class="mr16">Subtotal</strong>
+                                        <span t-out="current_subtotal"
+                                            t-options='{"widget": "monetary", "display_currency": sale_order.pricelist_id.currency_id}'
                                         />
-                                        <div t-if="line.discount">
-                                            <t t-out="(1-line.discount / 100.0) * line.price_unit" t-options='{"widget": "float", "decimal_precision": "Product Price"}'/>
-                                        </div>
                                     </td>
-                                    <td t-if="display_discount" t-attf-class="text-end {{ 'd-none d-sm-table-cell' if report_type == 'html' else '' }}">
-                                        <strong t-if="line.discount &gt; 0" class="text-info">
-                                            <t t-out="((line.discount % 1) and '%s' or '%d') % line.discount"/>%
-                                        </strong>
-                                    </td>
-                                    <td t-attf-class="text-end {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
-                                        <span t-out="', '.join(map(lambda x: (x.description or x.name), line.tax_id))"/>
-                                    </td>
-                                    <td t-if="not line.is_downpayment" class="text-end">
-                                        <span class="oe_order_line_price_subtotal" t-field="line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
-                                        <span class="oe_order_line_price_total" t-field="line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
-                                    </td>
-                                </t>
-                                <t t-if="line.display_type == 'line_section'">
-                                    <td colspan="99">
-                                        <span t-field="line.name"/>
-                                    </td>
-                                    <t t-set="current_section" t-value="line"/>
-                                    <t t-set="current_subtotal" t-value="0"/>
-                                </t>
-                                <t t-if="line.display_type == 'line_note'">
-                                    <td colspan="99">
-                                        <span t-field="line.name"/>
-                                    </td>
-                                </t>
-                            </tr>
-                            <tr t-if="current_section and (line_last or lines_to_report[line_index+1].display_type == 'line_section') and not line.is_downpayment"
-                                class="is-subtotal text-end">
-                                <td colspan="99">
-                                    <strong class="mr16">Subtotal</strong>
-                                    <span t-out="current_subtotal"
-                                        t-options='{"widget": "monetary", "display_currency": sale_order.currency_id}'
-                                    />
-                                </td>
-                            </tr>
-                        </t>
-                    </tbody>
-                </table>
+                                </tr>
+                            </t>
+                        </tbody>
+                    </table>
+                </div>
 
                 <div id="total" class="row" name="total" style="page-break-inside: avoid;">
                     <div t-attf-class="#{'col-6' if report_type != 'html' else 'col-sm-7 col-md-6'} ms-auto">