From 9bd294823c4eca68a345ad08fa0c55b262539602 Mon Sep 17 00:00:00 2001
From: "Guillaume (gdi)" <gdi@odoo.com>
Date: Thu, 30 Mar 2023 08:43:50 +0000
Subject: [PATCH] [FIX] website: remove the margin above the mega menus

Since the upgrade to Bootstrap 5 and especially since this [BS5 commit],
there is a gap between the mega menu and the navbar when the user opens
a mega menu. This commit removes that gap.

Steps to reproduce the bug fixed by this commit:
- Have a mega menu on your website.
- Drop a block of a dark color at the top of the page (it helps to see
the problem).

=> When you open the mega menu, you can see a small piece of the block
of dark color between the navbar and the mega menu.

Technical explanation:
This [BS5 commit] introduces a new css rule that adds a
`margin-top: 0.125rem;` on the `.dropdown-menu[data-bs-popper]`. However
when [mega menus were introduced], another css rule prevents having a
gap between the nav and the mega menu (`margin-top: 0;` on
`.o_mega_menu`). This commit makes sure that it will be a `margin-top`
of 0 by making the property more important.

[BS5 commit]: https://github.com/odoo/odoo/commit/c48f57ea2538ad51e00ac27d58f8e191781444f3
[mega menus were introduced]: https://github.com/odoo/odoo/commit/1345702258adbfbee0d780dc22e552395e6d1df7

task-3133137
opw-3226013

X-original-commit: b41c76bd7583756ad059f77f0d3c1151720b0b0b
Part-of: odoo/odoo#118842
---
 addons/website/static/src/scss/website.scss     | 2 +-
 addons/website/static/tests/tours/edit_menus.js | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 6c04ea931ea..ffd323d8b6e 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1222,7 +1222,7 @@ header {
 .o_mega_menu {
     width: 100%;
     padding: 0;
-    margin-top: 0;
+    margin-top: 0 !important;
     border-radius: 0;
     background-clip: unset; // Remove the 1px gap introduced by BS4
     background-color: transparent; // In order to allow the mega menu to be transparent
diff --git a/addons/website/static/tests/tours/edit_menus.js b/addons/website/static/tests/tours/edit_menus.js
index fdf5e2ae224..93bbe91df44 100644
--- a/addons/website/static/tests/tours/edit_menus.js
+++ b/addons/website/static/tests/tours/edit_menus.js
@@ -240,6 +240,11 @@ wTourUtils.registerWebsitePreviewTour('edit_menus', {
         content: "When the mega menu is opened, scroll up",
         trigger: 'iframe #top_menu .o_mega_menu_toggle.show',
         run: function () {
+            const marginTopOfMegaMenu = getComputedStyle(
+                this.$anchor[0].closest('.dropdown').querySelector('.o_mega_menu'))['margin-top'];
+            if (marginTopOfMegaMenu !== '0px') {
+                console.error('The margin-top of the mega menu should be 0px');
+            }
             // Scroll up.
             this.$anchor[0].closest('body').querySelector('.s_media_list_item:nth-child(2)')
                 .scrollIntoView(true);