From 8ed9d667fefea40c9f06bd70e7a54127674d762b Mon Sep 17 00:00:00 2001
From: Pierre Paridans <app@odoo.com>
Date: Thu, 12 May 2022 14:30:49 +0000
Subject: [PATCH] [FIX] web: Dialog footer buttons' spacing

Before this commit, some dialog's footer buttons were glued to each
other which impacted their readability and usability.

This commit fixes it by properly applying the existing `gap` CSS rule
which defined the spacing between the buttons, and this independently of
the structure of the footer.

Indeed, due to historical reasons, the `.modal-footer` may contain
drastically different structures depending of the kind of modal.

A non-exhaustive list of encountered structures:
- `.modal-footer > button`
- `.modal-footer > div > footer > button`
- `.modal-footer > div > button`

Note: some existing rules already illustrate that in `modal.scss`.

task-2792884

closes odoo/odoo#91371

X-original-commit: d15bfc785d392a7dffadf9489d1d21f449d42ca4
Related: odoo/enterprise#27337
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
---
 addons/web/static/src/core/dialog/dialog.scss | 15 ++++++++++++++-
 addons/web/static/src/core/dialog/dialog.xml  |  2 +-
 addons/web/static/src/legacy/scss/modal.scss  |  8 --------
 addons/web/static/src/legacy/xml/base.xml     |  2 +-
 addons/web/static/src/legacy/xml/dialog.xml   |  2 +-
 5 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/addons/web/static/src/core/dialog/dialog.scss b/addons/web/static/src/core/dialog/dialog.scss
index 429a11c6155..f007a3e9c5e 100644
--- a/addons/web/static/src/core/dialog/dialog.scss
+++ b/addons/web/static/src/core/dialog/dialog.scss
@@ -1,5 +1,18 @@
 .modal.o_technical_modal .modal-footer {
-    gap: map-get($spacers, 1);
+    // FIXME: These selectors should not be necessary if we used buttons
+    // as direct children of the modal-footer as normally required
+    div,
+    footer {
+        display: flex;
+        flex-wrap: wrap;
+        flex: 1 1 auto;
+        justify-content: flex-start;
+        gap: map-get($spacers, 1);
+
+        @include media-breakpoint-down(sm) {
+            justify-content: space-around;
+        }
+    }
 
     button {
         margin: 0; // Reset boostrap.
diff --git a/addons/web/static/src/core/dialog/dialog.xml b/addons/web/static/src/core/dialog/dialog.xml
index b3d0c797e38..5cacc2f9d94 100644
--- a/addons/web/static/src/core/dialog/dialog.xml
+++ b/addons/web/static/src/core/dialog/dialog.xml
@@ -19,7 +19,7 @@
                         <main class="modal-body">
                             <t t-slot="default"/>
                         </main>
-                        <footer t-if="props.footer" class="modal-footer justify-content-start">
+                        <footer t-if="props.footer" class="modal-footer justify-content-around justify-content-sm-start flex-wrap gap-1">
                             <t t-slot="footer">
                                 <button class="btn btn-primary" t-on-click="data.close">
                                     <t>Ok</t>
diff --git a/addons/web/static/src/legacy/scss/modal.scss b/addons/web/static/src/legacy/scss/modal.scss
index f1e6d8c1931..601c99c09dc 100644
--- a/addons/web/static/src/legacy/scss/modal.scss
+++ b/addons/web/static/src/legacy/scss/modal.scss
@@ -45,15 +45,7 @@
         }
 
         .modal-footer {
-            flex-wrap: wrap;
             text-align: left;
-            justify-content: flex-start;
-
-            // TODO These rules should not be necessary if we used buttons
-            // as direct children of the modal-footer as normally required
-            > div, > footer {
-                flex: 1 1 auto;
-            }
         }
     }
 
diff --git a/addons/web/static/src/legacy/xml/base.xml b/addons/web/static/src/legacy/xml/base.xml
index 98f72823d40..3cebde0eafd 100644
--- a/addons/web/static/src/legacy/xml/base.xml
+++ b/addons/web/static/src/legacy/xml/base.xml
@@ -260,7 +260,7 @@
                         <main class="modal-body">
                             <t t-slot="default"/>
                         </main>
-                        <footer t-if="props.renderFooter" class="modal-footer" t-ref="modal-footer">
+                        <footer t-if="props.renderFooter" class="modal-footer justify-content-around justify-content-sm-start flex-wrap gap-1" t-ref="modal-footer">
                             <t t-slot="buttons" close="_close" >
                                 <button class="btn btn-primary" t-on-click.prevent="_close">
                                     <t>Ok</t>
diff --git a/addons/web/static/src/legacy/xml/dialog.xml b/addons/web/static/src/legacy/xml/dialog.xml
index 47870688782..d9b1e71e899 100644
--- a/addons/web/static/src/legacy/xml/dialog.xml
+++ b/addons/web/static/src/legacy/xml/dialog.xml
@@ -18,7 +18,7 @@
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close" tabindex="-1">×</button>
                 </header>
                 <main class="modal-body"/>
-                <footer t-if="renderFooter" class="modal-footer"/>
+                <footer t-if="renderFooter" class="modal-footer justify-content-around justify-content-sm-start flex-wrap gap-1"/>
             </div>
         </div>
     </div>