use -webkit-fill-available instead of 100vh

The approach of using 100vh interacts poorly with how Chromium and
Safari calculate the viewport height on mobile. They include their
navigation bar as part of the viewport height from the start to avoid
dynamic changes to the viewport site.

10 files changed, 10 insertions, 9 deletions

diff --git a/static/build.html b/static/build.html
index b6138b31..240db0e8 100644
--- a/static/build.html
+++ b/static/build.html
@@ -20,7 +20,7 @@
         <meta property="og:site_name" content="GrapheneOS"/>
         <link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico"/>
         <link rel="mask-icon" href="/safari_pinned_tab_icon.svg" color="#000000"/>
-        <link rel="stylesheet" href="/grapheneos.css?12"/>
+        <link rel="stylesheet" href="/grapheneos.css?13"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="canonical" href="https://grapheneos.org/build"/>
     </head>
diff --git a/static/contact.html b/static/contact.html
index 7376e057..1c33385a 100644
--- a/static/contact.html
+++ b/static/contact.html
@@ -20,7 +20,7 @@
         <meta property="og:site_name" content="GrapheneOS"/>
         <link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico"/>
         <link rel="mask-icon" href="/safari_pinned_tab_icon.svg" color="#000000"/>
-        <link rel="stylesheet" href="/grapheneos.css?12"/>
+        <link rel="stylesheet" href="/grapheneos.css?13"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="canonical" href="https://grapheneos.org/contact"/>
     </head>
diff --git a/static/donate.html b/static/donate.html
index 964511dd..f672fedb 100644
--- a/static/donate.html
+++ b/static/donate.html
@@ -20,7 +20,7 @@
         <meta property="og:site_name" content="GrapheneOS"/>
         <link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico"/>
         <link rel="mask-icon" href="/safari_pinned_tab_icon.svg" color="#000000"/>
-        <link rel="stylesheet" href="/grapheneos.css?12"/>
+        <link rel="stylesheet" href="/grapheneos.css?13"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="canonical" href="https://grapheneos.org/donate"/>
     </head>
diff --git a/static/grapheneos.css b/static/grapheneos.css
index f051855f..3f795316 100644
--- a/static/grapheneos.css
+++ b/static/grapheneos.css
@@ -5,6 +5,7 @@ body {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
+    min-height: -webkit-fill-available;
     font-family: Roboto, sans-serif;
     background-color: #fafafa; /* grey50 */
     color: rgba(0, 0, 0, 0.87); /* 87% black */
diff --git a/static/index.html b/static/index.html
index ab5ff4a0..a8954bcc 100644
--- a/static/index.html
+++ b/static/index.html
@@ -20,7 +20,7 @@
         <meta property="og:site_name" content="GrapheneOS"/>
         <link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico"/>
         <link rel="mask-icon" href="/safari_pinned_tab_icon.svg" color="#000000"/>
-        <link rel="stylesheet" href="/grapheneos.css?12"/>
+        <link rel="stylesheet" href="/grapheneos.css?13"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="canonical" href="https://grapheneos.org/"/>
     </head>
diff --git a/static/install.html b/static/install.html
index 79a47ead..e9d4015b 100644
--- a/static/install.html
+++ b/static/install.html
@@ -20,7 +20,7 @@
         <meta property="og:site_name" content="GrapheneOS"/>
         <link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico"/>
         <link rel="mask-icon" href="/safari_pinned_tab_icon.svg" color="#000000"/>
-        <link rel="stylesheet" href="/grapheneos.css?12"/>
+        <link rel="stylesheet" href="/grapheneos.css?13"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="canonical" href="https://grapheneos.org/install"/>
     </head>
diff --git a/static/pdfviewer_privacy_policy.html b/static/pdfviewer_privacy_policy.html
index 1551f498..eac51097 100644
--- a/static/pdfviewer_privacy_policy.html
+++ b/static/pdfviewer_privacy_policy.html
@@ -20,7 +20,7 @@
         <meta property="og:site_name" content="GrapheneOS"/>
         <link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico"/>
         <link rel="mask-icon" href="/safari_pinned_tab_icon.svg" color="#000000"/>
-        <link rel="stylesheet" href="/grapheneos.css?12"/>
+        <link rel="stylesheet" href="/grapheneos.css?13"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="canonical" href="https://grapheneos.org/pdfviewer_privacy_policy"/>
     </head>
diff --git a/static/releases.html b/static/releases.html
index 2dbc731b..fdb3eb04 100644
--- a/static/releases.html
+++ b/static/releases.html
@@ -20,7 +20,7 @@
         <meta property="og:site_name" content="GrapheneOS"/>
         <link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico"/>
         <link rel="mask-icon" href="/safari_pinned_tab_icon.svg" color="#000000"/>
-        <link rel="stylesheet" href="/grapheneos.css?12"/>
+        <link rel="stylesheet" href="/grapheneos.css?13"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="canonical" href="https://grapheneos.org/releases"/>
     </head>
diff --git a/static/source.html b/static/source.html
index 0eb3d5ee..9404792a 100644
--- a/static/source.html
+++ b/static/source.html
@@ -20,7 +20,7 @@
         <meta property="og:site_name" content="GrapheneOS"/>
         <link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico"/>
         <link rel="mask-icon" href="/safari_pinned_tab_icon.svg" color="#000000"/>
-        <link rel="stylesheet" href="/grapheneos.css?12"/>
+        <link rel="stylesheet" href="/grapheneos.css?13"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="canonical" href="https://grapheneos.org/source"/>
     </head>
diff --git a/static/usage.html b/static/usage.html
index a7621a32..be7a5433 100644
--- a/static/usage.html
+++ b/static/usage.html
@@ -20,7 +20,7 @@
         <meta property="og:site_name" content="GrapheneOS"/>
         <link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico"/>
         <link rel="mask-icon" href="/safari_pinned_tab_icon.svg" color="#000000"/>
-        <link rel="stylesheet" href="/grapheneos.css?12"/>
+        <link rel="stylesheet" href="/grapheneos.css?13"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="canonical" href="https://grapheneos.org/usage"/>
     </head>