[FIX] web_editor: remove the spaces around full width grid mode snippets

Steps to reproduce:
- In edit mode, drop the "Masonry" snippet.
=> There are spaces on the left and the right of the snippet. It should
not be the case as it is supposed to take the whole space, since its
container width is full (`container-fluid` class).

This happens because since commit [1], the rule setting the `--gutter-x`
CSS variable (which manages the row margins) to 30px when the container
is full width is now overridden by the general `.o_grid_mode` rule that
sets it to 0px, making the negative margins disappear.

Indeed, in commit [1], in order to disable the grid mode when used in a
mega menu that is in an extra menu (because the layout was broken), the
CSS selector managing the `.o_grid_mode` class has been modified. This
change caused the specificity of the rule to increase (x3), which made
it override the container rule.

This commit reverts this change and disables the grid mode in the extra
menu in a better way, by adding a proper rule for this specific case.

[1]: https://github.com/odoo/odoo/commit/709bffcb6de8883b679c0fc942f45cb293621c30

task-3593697

closes odoo/odoo#142189

X-original-commit: 8381af7d9898d7502c82a6b5622b0e91734267d8
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/web_editor/static/src/scss/web_editor.frontend.scss

@@ -48,7 +48,7 @@
 }
 
 @include media-breakpoint-up(lg) {
-    .o_grid_mode:not(.o_extra_menu_items .o_grid_mode) {
+    .o_grid_mode {
         display: grid !important;
         grid-auto-rows: 50px;
         grid-template-columns: repeat(12, 1fr);
@@ -68,6 +68,12 @@
         --gutter-x: 30px;
     }
 
+    .o_extra_menu_items .o_grid_mode {
+        display: flex !important;
+        row-gap: 0px !important;
+        column-gap: 0px !important;
+    }
+
     .o_grid_item_image {
         > img, > .media_iframe_video {
             width: 100% !important;