Merge pull request #560 from Tecnativa/9.0-web_responsive-fix_page_overflow

[FIX][web_responsive] Fit view to screen.

web_responsive/README.rst

@@ -10,11 +10,10 @@ This module provides a mobile compliant interface for Odoo Community web.
 
 Features:
 
- * New navigation with an App drawer
- * Keyboard shortcuts for easier navigation
- * Display kanban views for small screens format if an action or field One2x
-   has a kanban view
-
+* New navigation with an App drawer
+* Keyboard shortcuts for easier navigation
+* Display kanban views for small screens format if an action or field One2x
+  has a kanban view
 
 Installation
 ============

web_responsive/static/src/less/main.less

@@ -4,6 +4,8 @@
 body {
     width: 100%;
     height: 100%;
+    display: flex;
+    flex-direction: column;
 
     // Do not fix the search part, it's too big for small screens
     @media (max-width: @screen-sm-max) {
@@ -14,6 +16,11 @@ body {
             }
         }
     }
+
+    > header {
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
 }
 
 main {
@@ -45,16 +52,11 @@ main {
     z-index: 1051;
 }
 
-.o_web_client {
-    >.o_main {
-        overflow: auto;
-        > .o_main_content {
-            overflow: initial;
-            > .o_content {
-                overflow: initial;
-            }
-        }
-    }
+.oe_web_client {
+    flex-shrink: 0;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
 }
 
 // Remove z-index from CP buttons so it doesn't overlap the menu

web_responsive/views/web.xml

@@ -20,7 +20,7 @@
             <meta name="MobileOptimized" content="320" />
             <meta name="HandheldFriendly" content="True" />
             <meta name="apple-mobile-web-app-capable" content="yes" />
-            <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+            <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no" />
         </xpath>
 
         <xpath expr="//nav[@id='oe_main_menu_navbar']" position="replace">