Fix height issue on webkit (#49)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v8.1.7
+### Changed
+- Fixed app height on webkit based browsers to take all available space instead of 100vh
+
 ## v8.1.7
 ### Changed
 - Updated `$max-size-60` to 46.25rem

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/azure-iot-ux-fluent-css",
-  "version": "8.1.7",
+  "version": "8.1.8",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@microsoft/azure-iot-ux-fluent-css",
   "description": "Azure IoT common styles library for CSS, Colors and Themes",
-  "version": "8.1.7",
+  "version": "8.1.8",
   "license": "MIT",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

src/_normalize.scss

@@ -15,7 +15,15 @@
 }
 
 :global {
+  :root {
+    // Fix webkit mobile bug with handling 100vh hiding it over the sticky browser footer
+    height: -webkit-fill-available;
+  }
+
   body {
+    height: 100vh;
+    height: -webkit-fill-available;
+
     margin: 0;
     padding: 0;
 
@@ -26,7 +34,8 @@
   }
 
   #root {
-    height: 100vh;
+    height: 100%;
+    height: -webkit-fill-available;
     
     // Set positioning to relative so that everything flows from shell
     position: relative;