[FIX] account, hr_expense: amounts on multiple lines in the dashboard

Before this commit, the amount currency could be wrapped on a
second line (on mobile).

To fix this, we had to find a way to have more space:
- Buttons are now displayed at the top (mobile only).
- Amounts can grow (col-auto) and the other column will take the
  space left (col) and add "..." when there is not enough space.
  (mobile + desktop)

We also had to remove a button from a div tag in order to display
the buttons next to each other on mobile (buttons are "inline-block"
but div is a "block").
The main flow tour has been adapted accordingly and the typo has
been fixed too...

closes odoo/odoo#46680

Task-id: 2184243
X-original-commit: 159e3d4cb8a301c908f7718a56138528033e75d4
Related: odoo/enterprise#8963
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>

4 files changed, 32 insertions, 29 deletions

diff --git a/addons/account/static/src/scss/account_journal_dashboard.scss b/addons/account/static/src/scss/account_journal_dashboard.scss
index b842a94f058..36d8dbfd171 100644
--- a/addons/account/static/src/scss/account_journal_dashboard.scss
+++ b/addons/account/static/src/scss/account_journal_dashboard.scss
@@ -1,8 +1,11 @@
 .o_kanban_view.o_kanban_dashboard.o_account_kanban {
     .o_kanban_record {
 
-        .oe_kanban_action_button {
-            margin-bottom: 5px;
+        @include media-breakpoint-up(sm) {
+            .oe_kanban_action_button {
+                display: block;
+                margin-bottom: 5px;
+            }
         }
 
         .o_kanban_card_settings {
diff --git a/addons/account/views/account_journal_dashboard_view.xml b/addons/account/views/account_journal_dashboard_view.xml
index 0136f959254..8b31b018e72 100644
--- a/addons/account/views/account_journal_dashboard_view.xml
+++ b/addons/account/views/account_journal_dashboard_view.xml
@@ -209,19 +209,19 @@
                     </t>
 
                     <t t-name="JournalMiscelaneous">
-                        <div class="col-5 o_kanban_primary_left">
+                        <div class="col-12 col-sm-5 mb-3 mb-sm-0 o_kanban_primary_left">
                             <button type="object" name="action_create_new" class="btn btn-primary" groups="account.group_account_invoice">
                                 <span>New Entry</span>
                             </button>
                         </div>
-                        <div class="col-7 o_kanban_primary_right">
+                        <div class="col-12 col-sm-7 o_kanban_primary_right">
                             <field name="json_activity_data" widget="kanban_vat_activity"/>
                             <t t-if="dashboard.number_to_check > 0">
                                 <div class="row">
-                                    <div class="col-7 text-left">
+                                    <div class="col overflow-hidden text-left">
                                         <a type="object" name="open_action" context="{'action_name': 'action_move_journal_line', 'search_default_to_check': True}"><t t-esc="dashboard.number_to_check"/> to check</a>
                                     </div>
-                                    <div class="col-5 text-right">
+                                    <div class="col-auto text-right">
                                         <span><t t-esc="dashboard.to_check_balance"/></span>
                                     </div>
                                 </div>
@@ -233,10 +233,10 @@
                         <!-- On the left, display :
                             - A button corresponding to the bank_statements_source, if it wasn't configured, a button for each of them
                             - If there are statements to reconcile, a link to reconcile them -->
-                        <div class="col-5 o_kanban_primary_left">
+                        <div class="col-12 col-sm-5 mb-3 mb-sm-0 o_kanban_primary_left">
                             <t t-if="journal_type == 'bank'" id="journal_body_bank_cash_left">
-                                <div name="bank_journal_cta">
-                                    <button t-if="dashboard.bank_statements_source == 'undefined'" name="action_configure_bank_journal" type="object" class="btn btn-primary"  groups="account.group_account_invoice">Configure</button>
+                                <button t-if="dashboard.bank_statements_source == 'undefined'" name="action_configure_bank_journal" type="object" class="btn btn-primary"  groups="account.group_account_invoice">Configure</button>
+                                <div name="bank_journal_cta" class="mt-3 mt-sm-0">
                                     <div name="bank_statement_create_button" groups="account.group_account_invoice">
                                         <a type="object" name="create_bank_statement" class="oe_inline">Create</a><span name="button_import_placeholder"/> Statements
                                     </div>
@@ -250,31 +250,31 @@
                             </t>
                         </div>
                         <!-- On the right, show other common informations/actions -->
-                        <div class="col-7 o_kanban_primary_right">
+                        <div class="col-12 col-sm-7 o_kanban_primary_right">
                             <t t-if="dashboard.last_balance != dashboard.account_balance">
                                 <div class="row">
-                                    <div class="col-7 text-left">
+                                    <div class="col overflow-hidden text-left">
                                         <span title="Balance in General Ledger">Balance in GL</span>
                                     </div>
-                                    <div class="col-5 text-right">
+                                    <div class="col-auto text-right">
                                         <span><t t-esc="dashboard.account_balance"/></span>
                                     </div>
                                 </div>
                                 <div class="row" name="latest_statement">
-                                    <div class="col-7 text-left">
+                                    <div class="col overflow-hidden text-left">
                                         <span title="Latest Statement">Latest Statement</span>
                                     </div>
-                                    <div class="col-5 text-right">
+                                    <div class="col-auto text-right">
                                         <span><t t-esc="dashboard.last_balance"/></span>
                                     </div>
                                 </div>
                             </t>
                             <t t-else="" id="journal_body_bank_cash_right">
                                 <div class="row">
-                                    <div class="col-7 text-left">
+                                    <div class="col overflow-hidden text-left">
                                         <span title="Balance in General Ledger">Balance in GL</span>
                                     </div>
-                                    <div class="col-5 text-right">
+                                    <div class="col-auto text-right">
                                         <span><t t-esc="dashboard.account_balance"/></span>
                                     </div>
                                 </div>
@@ -285,12 +285,12 @@
                         </div>
                     </t>
                     <t t-name="JournalBodySalePurchase" id="account.JournalBodySalePurchase">
-                        <div class="col-5 o_kanban_primary_left">
+                        <div class="col-12 col-sm-5 mb-3 mb-sm-0 o_kanban_primary_left">
                             <t t-if="journal_type == 'sale'">
                                 <button type="object" name="action_create_new" class="btn btn-primary o_invoice_new" groups="account.group_account_invoice">
                                     <span>New Invoice</span>
                                 </button>
-                                <button class="btn btn-primary d-block o_button_upload_bill" journal_type="sale" groups="account.group_account_invoice">
+                                <button class="btn btn-primary o_button_upload_bill" journal_type="sale" groups="account.group_account_invoice">
                                     <span>Upload Invoices</span>
                                 </button>
                             </t>
@@ -298,25 +298,25 @@
                                 <button type="object" name="action_create_new" class="btn btn-primary o_invoice_new" groups="account.group_account_invoice">
                                     <span>New Bill</span>
                                 </button>
-                                <button class="btn btn-primary d-block o_button_upload_bill" journal_type="purchase" groups="account.group_account_invoice">
+                                <button class="btn btn-primary o_button_upload_bill" journal_type="purchase" groups="account.group_account_invoice">
                                     <span>Upload Bills</span>
                                 </button>
                             </t>
                         </div>
-                        <div class="col-7 o_kanban_primary_right">
+                        <div class="col-12 col-sm-7 o_kanban_primary_right">
                             <div class="row" t-if="dashboard.number_draft">
-                                <div class="col-7 text-left">
+                                <div class="col overflow-hidden text-left">
                                     <a type="object" name="open_action" context="{'search_default_draft': '1'}">
                                         <span t-if="journal_type == 'sale'" title="Invoices to Validate"><t t-esc="dashboard.number_draft"/> Invoices to Validate</span>
                                         <span t-if="journal_type == 'purchase'" title="Bills to Validate"><t t-esc="dashboard.number_draft"/> Bills to Validate</span>
                                     </a>
                                 </div>
-                                <div class="col-5 text-right">
+                                <div class="col-auto text-right">
                                     <span><t t-esc="dashboard.sum_draft"/></span>
                                 </div>
                             </div>
                             <div class="row" t-if="dashboard.number_waiting">
-                                <div class="col-7 text-left">
+                                <div class="col overflow-hidden text-left">
                                     <a type="object" t-if="journal_type == 'sale'" name="open_action"
                                     context="{'search_default_unpaid':1}" id="account_dashboard_sale_pay_link">
                                         <t t-esc="dashboard.number_waiting"/> Unpaid Invoices
@@ -327,16 +327,16 @@
                                         <t t-esc="dashboard.number_waiting"/> Bills to Pay
                                     </a>
                                 </div>
-                                <div class="col-5 text-right">
+                                <div class="col-auto text-right">
                                     <span><t t-esc="dashboard.sum_waiting"/></span>
                                 </div>
                             </div>
                             <t t-if="dashboard.number_to_check > 0">
                                 <div class="row">
-                                    <div class="col-7 text-left">
+                                    <div class="col overflow-hidden text-left">
                                         <a type="object" name="open_action" context="{'search_default_to_check': True}"><t t-esc="dashboard.number_to_check"/> to check</a>
                                     </div>
-                                    <div class="col-5 text-right">
+                                    <div class="col-auto text-right">
                                         <span><t t-esc="dashboard.to_check_balance"/></span>
                                     </div>
                                 </div>
diff --git a/addons/hr_expense/views/account_journal_dashboard.xml b/addons/hr_expense/views/account_journal_dashboard.xml
index 921a2a8a6bb..e589a4f674d 100644
--- a/addons/hr_expense/views/account_journal_dashboard.xml
+++ b/addons/hr_expense/views/account_journal_dashboard.xml
@@ -8,12 +8,12 @@
         <field name="arch" type="xml">
             <xpath expr="//t[@id='account.JournalBodySalePurchase']//div[hasclass('o_kanban_primary_right')]" position="inside">
                 <div class="row" t-if="dashboard.number_expenses_to_pay">
-                    <div class="col-7 text-left">
+                    <div class="col overflow-hidden text-left">
                         <a type="object" t-if="journal_type == 'purchase'" name="open_expenses_action">
                             <t t-esc="dashboard.number_expenses_to_pay"/> Expenses to Process
                         </a>
                     </div>
-                    <div class="col-5 text-right">
+                    <div class="col-auto text-right">
                         <span t-if="journal_type == 'purchase'"><t t-esc="dashboard.sum_expenses_to_pay"/></span>
                     </div>
                 </div>
diff --git a/odoo/addons/test_main_flows/static/tests/tours/main_flow.js b/odoo/addons/test_main_flows/static/tests/tours/main_flow.js
index 26800770c3e..e32a70ace08 100644
--- a/odoo/addons/test_main_flows/static/tests/tours/main_flow.js
+++ b/odoo/addons/test_main_flows/static/tests/tours/main_flow.js
@@ -692,7 +692,7 @@ tour.register('main_flow_tour', {
     position: 'bottom',
 }, {
     edition: "enterprise",
-    trigger: 'div[name=bank_journal_cta] > button[data-name=action_cofigure_bank_journal], div[name=bank_journal_cta] > button[data-name=action_configure_bank_journal]',
+    trigger: 'button[data-name=action_configure_bank_journal]',
     content: _t('Configure Bank Journal'),
     position: 'bottom',
 }, {