Scenario: add a mega menu, in mobile scroll to not be at top of page,
and click to open hamburger menu then click to open mega menu content.

Result: the mega menu is mostly shown thanks to
579160b08c6e73d809be79f561214118f1284532 but a small part at the bottom
is inaccessible.

Reason: the height needs to take into account the margin bottom so it
can be shown fully on the page.

Fix: add a calc to remove the height of the margin-top.

opw-4737577
opw-4737823
opw-4738673

__PR NOTE__: I'm not sure if all browser support of using calc with different units (maybe I'm confusing it with some less calculation), if the solution was not acceptable for that, the only other way I see to solve this, would be to put "position: relative" to the `#top_menu_collapse_mobile .offcanvas-body` element and let the mega menu take the whole space, i.e. something like that:

```diff
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 16fdd05e006f..05c9dbbc88cd 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1629,6 +1629,9 @@ header {
 }

 // Offcanvas mega menu on mobile or in sidebar/hamburger header
+#top_menu_collapse_mobile .offcanvas-body {
+    position: relative;
+}
 .o_mega_menu_is_offcanvas {
     .o_mega_nav, .o_mega_menu {
         @include transition(opacity $offcanvas-transition-duration ease-in-out, visibility $offcanvas-transition-duration ease-in-out);
@@ -1664,7 +1667,6 @@ header {
         inset: 0 0 0 auto !important;
         display: block;
         visibility: hidden;
-        margin-top: $o-mega-menu-nav-height !important;
         border: none;
         max-height: 100vh;
         background-color: o-color('menu-custom') or o-color('menu');
```