[IMP] web: add better modal scrolling for frontend

Odoo overrides the modal behavior to make the modal-body scroll
instead of the <body/> when the modal would overflow the window. This
was however only done for "technical" modals i.e. the ones of the Odoo
UI, not the website/portal ones which are displayed to visitors.

This commit makes the behavior active for all bootstrap modals wherever
bootstrap is used.

2 files changed, 35 insertions, 37 deletions

diff --git a/addons/web/static/src/scss/bootstrap_review.scss b/addons/web/static/src/scss/bootstrap_review.scss
index 9348fcce189..a74d326cd9a 100644
--- a/addons/web/static/src/scss/bootstrap_review.scss
+++ b/addons/web/static/src/scss/bootstrap_review.scss
@@ -15,3 +15,25 @@
     // will use the color of a default card background with a light opacity.
     @include o-bg-color(rgba($card-bg, $o-card-body-bg-opacity));
 }
+
+// Modify modals so that their scrollable element is the modal-body (except in
+// mobile).
+@include media-breakpoint-up(sm) {
+    .modal-dialog {
+        height: 100%;
+        padding: $modal-dialog-margin-y-sm-up 0;
+        margin: 0 auto;
+    }
+    .modal-content {
+        max-height: 100%;
+    }
+    .modal-header, .modal-footer {
+        flex: 0 0 auto;
+    }
+    .modal-body {
+        overflow: auto;
+        // fix iOS issue https://github.com/scottjehl/Device-Bugs/issues/8
+        -webkit-transform: translate3d(0, 0, 0);
+        min-height: 0;
+    }
+}
diff --git a/addons/web/static/src/scss/modal.scss b/addons/web/static/src/scss/modal.scss
index f02765c25c4..52c3100df31 100644
--- a/addons/web/static/src/scss/modal.scss
+++ b/addons/web/static/src/scss/modal.scss
@@ -47,44 +47,20 @@
         }
     }
 
+    @include media-breakpoint-up(sm) {
+        .modal-dialog .modal-content .modal-body.o_dialog_error {
+            overflow: visible;
+            display: flex;
+            flex-flow: column nowrap;
+
+            > .alert, > button {
+                flex: 0 0 auto;
+            }
 
-    @include media-breakpoint-up(md) {
-        .modal-dialog {
-            height: 100%;
-            padding: 30px 0;
-            margin: 0 auto;
-
-            .modal-content {
-                max-height: 100%;
-                display: flex;
-                flex-flow: column nowrap;
-
-                .modal-header, .modal-footer {
-                    flex: 0 0 auto;
-                }
-
-                .modal-body {
-                    overflow: auto;
-                    // fix iOS issue https://github.com/scottjehl/Device-Bugs/issues/8
-                    -webkit-transform: translate3d(0, 0, 0);
-                    min-height: 0;
-
-                    &.o_dialog_error {
-                        overflow: visible;
-                        display: flex;
-                        flex-flow: column nowrap;
-
-                        > .alert, > button {
-                            flex: 0 0 auto;
-                        }
-
-                        > .o_error_detail {
-                            flex: 1 1 auto;
-                            min-height: 0;
-                            overflow: auto;
-                        }
-                    }
-                }
+            > .o_error_detail {
+                flex: 1 1 auto;
+                min-height: 0;
+                overflow: auto;
             }
         }
     }