[FIX] web: prevent browser print to be limited to what's above the fold

Commit [1] moved page scrollbar to #wrapwrap, which introduced some
issues. This was needed to not have a double scrollbar when the builder
edition panel was moved from left to right.
One of the issue if that the browser print was not working anymore.

A workaround has been found with this commit to make it work again. It
is just reverting the mentioned commit when inside the browser print
preview, which can be achieved through css directly.

Note that in the future, this PR [2] should revert the fact that the
scrollable element is the #wrapwrap.

Also note that while this fix allow printing pages again, there is still
the same behavior as in Odoo 13 and before (where you can print pages
too): the printing preview will not be in desktop size but display the
pages as on tablet size.

[1]: https://github.com/odoo/odoo/commit/4e7be69825163c0a0ff41c882a196fc7f3158fb3
[2]: https://github.com/odoo/odoo/pull/98429

opw-3557672

closes odoo/odoo#144107

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

addons/web/static/src/scss/base_frontend.scss

@@ -2,7 +2,6 @@
 html, body, #wrapwrap {
     width: 100%;
     height: 100%;
-    overflow: hidden;
 }
 #wrapwrap {
     // The z-index is useful to prevent that children with a negative z-index
@@ -11,11 +10,6 @@ html, body, #wrapwrap {
     position: relative;
     display: flex;
     flex-flow: column nowrap;
-    // ... we delegate the scroll to that top element instead of the window/body
-    // This is at least needed for the edit mode to not have a double scrollbar
-    // due to the right editor panel (and since we want to minimize the style
-    // difference between edit mode and non-edit mode (wysiwyg)...).
-    overflow: auto;
 
     > * {
         flex: 0 0 auto;
@@ -27,3 +21,20 @@ html, body, #wrapwrap {
 .modal-open #wrapwrap {
     overflow: hidden;
 }
+
+// TODO: This whole block can be removed once the scroll bar is moved back from
+//       the #wrapwrap to the body. The fact the scroll bar is on the #wrapwrap
+//       prevent browser to print more than what is above the fold. This block
+//       is moving the scroll to the body when printing the page.
+@media screen {
+    html, body {
+        overflow: hidden;
+    }
+    #wrapwrap {
+        // ... we delegate the scroll to that top element instead of the window/body
+        // This is at least needed for the edit mode to not have a double scrollbar
+        // due to the right editor panel (and since we want to minimize the style
+        // difference between edit mode and non-edit mode (wysiwyg)...).
+        overflow: auto;
+    }
+}