From dd141a22f44ea88af18448c4a6089252daeba8cc Mon Sep 17 00:00:00 2001
From: Romeo Fragomeli <rfr@odoo.com>
Date: Tue, 7 Mar 2023 09:03:31 +0000
Subject: [PATCH] [FIX] web: modal vertical alignment outside the viewport
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Some modals (`.o_error_dialog`) have a visual bug and goes outside the
viewport. This bug occurs because the CSS `top` attribute is override by
an inline style.
The result CSS is
```css
.o_error_dialog {
   top: 50%; /* Ignored due to the inline top rule */
   transform: translateY(-50%);
   top: 0; /* Override inline style */
}
```

The commit instead use the Bootstrap 5.1 class `modal-dialog-centered`
to center vertically the modal.

Note: from now all modal will be center vertically as it's the direction
of the future design.

Steps to reproduce:
* Go to `Bank Accounts` menu
* Create a new recode (New button)
* Enter a `Account Number` and select an `Account Holder`
* Then check `Send Money`
* Try to save (cloud icon) => BUG the modal is outside the viewport

closes odoo/odoo#114535

Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
---
 addons/web/static/src/core/dialog/dialog.xml        | 2 +-
 addons/web/static/src/core/errors/error_dialog.scss | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/addons/web/static/src/core/dialog/dialog.xml b/addons/web/static/src/core/dialog/dialog.xml
index 12f6b05c5df..ae8bead3d41 100644
--- a/addons/web/static/src/core/dialog/dialog.xml
+++ b/addons/web/static/src/core/dialog/dialog.xml
@@ -8,7 +8,7 @@
                 t-att-class="{ o_technical_modal: props.technical, o_modal_full: isFullscreen }"
                 t-ref="modalRef"
                 >
-                <div class="modal-dialog" t-attf-class="modal-{{props.size}}">
+                <div class="modal-dialog modal-dialog-centered" t-attf-class="modal-{{props.size}}">
                     <div class="modal-content" t-att-class="props.contentClass" t-att-style="contentStyle">
                         <header t-if="props.header" class="modal-header">
                             <t t-slot="header" close="data.close" isFullscreen="isFullscreen">
diff --git a/addons/web/static/src/core/errors/error_dialog.scss b/addons/web/static/src/core/errors/error_dialog.scss
index cf5bfb1d6bd..b0ce72c496f 100644
--- a/addons/web/static/src/core/errors/error_dialog.scss
+++ b/addons/web/static/src/core/errors/error_dialog.scss
@@ -1,7 +1,4 @@
 .o_error_dialog {
-    top: 50%;
-    transform: translateY(-50%);
-
     @include media-breakpoint-up(md) {
         padding: 1rem;