From a6ad4dfb6ea72007cc76430f252f5daefca9d254 Mon Sep 17 00:00:00 2001
From: Patricio Beltran <pbelsal@gmail.com>
Date: Mon, 17 May 2021 11:52:16 -0700
Subject: [PATCH] Fix html/body/root normalization on height (#50)

---
 CHANGELOG.md        | 11 ++++++++---
 package-lock.json   |  2 +-
 package.json        |  2 +-
 src/_normalize.scss | 32 +++++++++++++++++++++-----------
 4 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 23df2c6..9b9bd0a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,11 @@
 # CHANGELOG
 
-## v8.1.7
+## v8.1.9
+## Fixed
+- Make HTML be the only one to take available space, all the other elements take 100%.
+- Include nextjs root element in normalize CSS for react root.
+
+## v8.1.8
 ### Changed
 - Fixed app height on webkit based browsers to take all available space instead of 100vh
 
@@ -139,11 +144,11 @@
 
 ## v5.0.2
 ### Changed
-- reverted changes on color background input for dark-theme 
+- reverted changes on color background input for dark-theme
 
 ## v5.0.1
 ### Changed
-- changed to transparent the color background on input for dark-theme 
+- changed to transparent the color background on input for dark-theme
 
 ## v5.0.0
 ### Changed
diff --git a/package-lock.json b/package-lock.json
index f0c4b27..c28a78f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/azure-iot-ux-fluent-css",
-  "version": "8.1.8",
+  "version": "8.1.9",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index f4085cc..baf6669 100644
--- a/package.json
+++ b/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.8",
+  "version": "8.1.9",
   "license": "MIT",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
diff --git a/src/_normalize.scss b/src/_normalize.scss
index 3be9af2..83d6dac 100644
--- a/src/_normalize.scss
+++ b/src/_normalize.scss
@@ -16,13 +16,20 @@
 
 :global {
   :root {
-    // Fix webkit mobile bug with handling 100vh hiding it over the sticky browser footer
-    height: -webkit-fill-available;
+    // Safari correctly handles `height: 100%` on the html element to the whole viewport height,
+    // but it doesn't for the body or root element, so we use it here, and then use flex
+    // to size everything correctly. This approach will guarantee that all browsers fill
+    // the entire viewport in the same way with html, body and app root
+    height: 100%;
+    display: flex;
+    flex-direction: column;
   }
 
   body {
-    height: 100vh;
-    height: -webkit-fill-available;
+    flex: 1;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
 
     margin: 0;
     padding: 0;
@@ -33,14 +40,17 @@
     color: var(--color-foreground-default);
   }
 
-  #root {
-    height: 100%;
-    height: -webkit-fill-available;
-    
+  // Ensure that the root of the React app uses the full page height
+  // We use an attribute selector rather than #__next, because CSS IDs may not
+  // begin with an underscore.
+  [id="root"], [id="__next"] {
+    flex: 1;
+    min-height: 100%;
+
     // Set positioning to relative so that everything flows from shell
     position: relative;
 
-    // Flex will help us position the masthead and workspace to take the full height of the 
+    // Flex will help us position the masthead and workspace to take the full height of the
     // viewport correctly
     display: flex;
     flex-direction: column;
@@ -221,11 +231,11 @@
       outline: 1px solid var(--color-foreground-inactive);
       outline-offset: -1px;
     }
-    
+
     &:focus:not(:focus-visible) {
       outline: 0;
     }
-    
+
     &:focus-visible {
       outline: 1px solid var(--color-foreground-inactive);
       outline-offset: -1px;