From 5b216ebf821db0c78240434cb6e6b67dc86fd8dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Tue, 15 Mar 2022 20:15:44 +0100
Subject: [PATCH] mobile: better work with percentage #210

as it is unclear yet if vh is what we really need here
---
 static/css/theme.css | 37 ++++++++++++++++++-------------------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/static/css/theme.css b/static/css/theme.css
index ab9bdc4e89..70a4924ae2 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -44,8 +44,8 @@
 }
 
 html {
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
 }
 
 body {
@@ -56,11 +56,11 @@ body {
     font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
     font-size: 16.25px;
     font-weight: 300;
-    height: 100vh;
+    height: 100%;
     justify-content: flex-end;
     line-height: 1.574;
     overflow: hidden; /* to avoid browser scrollbar to flicker before we create our own */
-    width: 100vw;
+    width: 100%;
 }
 
 body #body-inner.chapter h1 {
@@ -110,10 +110,10 @@ th {
     flex-grow: 0;
     flex-shrink: 0;
     font-size: 15.25px;
-    height: 100vh;
+    height: 100%;
     left: 0;
     line-height: 1.574;
-    min-height: 100vh;
+    min-height: 100%;
     min-width: 300px;
     max-width: 300px;
     position: fixed;
@@ -354,14 +354,14 @@ th {
     flex-direction: column;
     flex-grow: 1;
     flex-shrink: 0;
-    height: 100vh;
+    height: 100%;
     margin-left: 300px;
-    min-height: 100vh;
-    min-width: calc( 100vw - 300px);
-    max-width: calc( 100vw - 300px);
+    min-height: 100%;
+    min-width: calc( 100% - 300px);
+    max-width: calc( 100% - 300px);
     overflow-wrap: break-word; /* avoid x-scrolling of body if it is to large to fit */
     position: relative; /* PS */
-    width: calc( 100vw - 300px);
+    width: calc( 100% - 300px);
     z-index: 300;
 }
 
@@ -1044,9 +1044,9 @@ span.nav i{
     }
     #body {
         margin-left: 230px;
-        min-width: calc( 100vw - 230px);
-        max-width: calc( 100vw - 230px);
-        width: calc( 100vw - 230px);
+        min-width: calc( 100% - 230px);
+        max-width: calc( 100% - 230px);
+        width: calc( 100% - 230px);
     }
 }
 @media only all and (max-width: 47.938em) {
@@ -1059,9 +1059,9 @@ span.nav i{
     }
     .mobile-support #body {
         margin-left: 0;
-        min-width: 100vw;
-        max-width: 100vw;
-        width: 100vw;
+        min-width: 100%;
+        max-width: 100%;
+        width: 100%;
     }
     .mobile-support.sidebar-flyout {
         overflow: hidden;
@@ -1084,7 +1084,6 @@ span.nav i{
         top: 0;
         z-index: 500;
     }
-
 }
 
 .copy-to-clipboard-button {
@@ -1313,7 +1312,7 @@ option {
 
 #TableOfContents {
     font-size: 13px !important;
-    max-height: 85vh;
+    max-height: 85%;
     overflow: auto;
     padding: 15px 5px !important;
 }