[FIX] web: fix form view dropdown's buttons shifted on Edge

In form views, there are stat buttons.

When the window size is too small, some buttons are packed into
a "More" dropdown.

Before this commit:

    - The form view dropdown's buttons are shifted on Microsoft Edge
      and IE 11.

After this commit:

    - The form view dropdown's buttons are not shifted anymore on
      Microsoft Edge and IE 11.

There was a fixed line-height on the button's icon. On Edge and IE 11,
it makes the icon moving down and this causes the offsetting.

The purpose of the line-height was to fix the button height to 44 pixels

So, I set up the button's height and centered the content.

Also, I removed a useless border-left because there was already one
border on the dropdown container.

OPW-2079694

closes odoo/odoo#39635

X-original-commit: a7d9f2a5a94662602a34f7e68e5cd0c4cd07c7f3
Signed-off-by: Jason Van Malder <jasonvanmalder@users.noreply.github.com>

1 files changed, 22 insertions, 0 deletions

diff --git a/addons/web/static/src/scss/form_view.scss b/addons/web/static/src/scss/form_view.scss
index 2744f1b1080..43fa9eff3a9 100644
--- a/addons/web/static/src/scss/form_view.scss
+++ b/addons/web/static/src/scss/form_view.scss
@@ -441,6 +441,28 @@
                 }
             }
         }
+
+        @mixin dropdownButtonsFix {
+            .btn.oe_stat_button.dropdown-item {
+                height: 44px !important;
+                padding: 5px 0 5px 0 !important;
+                border-left: none !important;
+
+                > .o_button_icon {
+                    line-height: normal;
+                }
+            }
+        }
+
+        // IE 11 only
+        @media all and (-ms-high-contrast:none) {
+            @include dropdownButtonsFix
+        }
+
+        // Edge only
+        @supports (display:-ms-grid) {
+            @include dropdownButtonsFix
+        }
     }
 
     // Title