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>