[FIX] Demo: Fix wrapper style

When we introduced the mobile mode, we started relying on the dynamic
vewport height (dvh) to account for the resizing of the viewport when
the virtual keyboard of a smarphone would pop up.

However, the rule we chose was to set the height of spreadsheet wrapper to
100dvh, which stands for 100% of the dynamic viewport height. As such,
if we were to add some header before the Spreadsheet component, the
latter would keep its size as 100% of the viewport, meaning that the
full component is pushed downwards and it overflows from the page.

This revision places the 100dvh rule over the full page to account for
any header that could be added in the future.

closes #7556

Task: 5212448
X-original-commit: f814b30
Signed-off-by: Pierre Rousseau (pro) <[email protected]>
Signed-off-by: Rémi Rahir (rar) <[email protected]>

Author: rrahir

demo/main.css

@@ -6,6 +6,8 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu,
     "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
     "Noto Color Emoji" !important;
+  height: 100dvh !important;
+  width: 100dvw !important;
 }
 
 .o-spreadsheet .o-test-notification {

demo/main.js

@@ -338,13 +338,13 @@ class Demo extends Component {
 }
 
 Demo.template = xml/* xml */ `
-  <div t-if="state.displayHeader" class="d-flex flex flex-column justify-content">
+  <div t-if="state.displayHeader" class="d-flex flex flex-column justify-content w-100 h-100">
     <div class="p-3 border-bottom">A header</div>
-    <div class="flex-fill" style="height: 100dvh !important;width: 100dvw !important;">
-      <Spreadsheet model="model" notifyUser="notifyUser" colorScheme="state.colorScheme" t-key="state.key"/>
+    <div class="flex-fill">
+      <Spreadsheet model="model" notifyUser="notifyUser" t-key="state.key" colorScheme="state.colorScheme"/>
     </div>
   </div>
-  <div t-else="" style="height: 100dvh !important;width: 100dvw !important;">
+  <div t-else="" class="w-100 h-100">
     <Spreadsheet model="model" t-key="state.key" notifyUser="notifyUser" colorScheme="state.colorScheme"/>
   </div>
 `;