Fixes #523: Add some style

pwnagotchi/ui/web/static/css/style.css

@@ -9,6 +9,7 @@ form {
     left: 0;
     width: 100vw;
     height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
     display: flex;
     flex-direction: column;
 }

pwnagotchi/ui/web/static/js/viewportHeight.js

@@ -0,0 +1,17 @@
+/* https://css-tricks.com/the-trick-to-viewport-units-on-mobile/*/
+
+var lastViewportHeight;
+
+function updateViewportSize() {
+  // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
+  var vh = window.innerHeight * 0.01;
+  if (!lastViewportHeight || lastViewportHeight !== vh) {
+    // Then we set the value in the --vh custom property to the root of the document
+    document.documentElement.style.setProperty("--vh", vh + "px");
+    lastViewportHeight = vh;
+  }
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  updateViewportSize();
+});

pwnagotchi/ui/web/templates/index.html

@@ -24,6 +24,7 @@
   </div>
 </div>
 
+<script type="text/javascript" src="/js/refresh.js"></script>
 <script type="text/javascript" src="/js/refresh.js"></script>
 
 </body>