From af7815e858e74eb955d29376dd82c2b4e82fdba0 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Tue, 11 Jan 2022 13:56:43 +0000
Subject: [PATCH] Fix by Jonas for iOS devices

---
 view.php | 70 +++++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 51 insertions(+), 19 deletions(-)
diff --git a/view.php b/view.php
index cc14edb..365312b 100644
--- a/view.php
+++ b/view.php
@@ -19,36 +19,63 @@ if ($baseurl[-1] != "/") $baseurl += "/";
 ?>
 <html>
 <head>
+
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <style>
 ul {
   list-style-type: none;
+  height: 52px;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #333;
   flex: 0 0 auto;
+  pointer-events: none;
 }
 
 li {
-  float: left;
   height: auto;
-  position: relative;
+  position: absolute;
   font-family: "sans-serif";
-}
-
-li.right {
-    float: right;
-    margin: 4px;
+  box-sizing: border-box;
 }
 
 li.logo {
-    margin-left: 1em;
-    margin-right: 1em;
-    padding-top: 6px;
-    padding-bottom: 6px;
-    line-height: 52px;
-    height: 52px;
-    box-sizing: border-box;
+  left: 0;  
+  margin-left: 1em;
+  margin-right: 1em;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  height: 52px;
+  box-sizing: border-box;
+}
+
+li.title {
+  position: relative;
+  width: 100%;
+  padding-left: 72px;
+  padding-right: 52px;
+  height: 52px;
+}
+
+li.title .container {
+  position:relative;
+  height:52px;
+}
+
+li.title .text {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+li.right {
+  top: 0;
+  right: 0;  
+  margin: 4px;
+  pointer-events: all;
 }
 
 li.logo img {
@@ -58,12 +85,10 @@ li.logo img {
   height: 40px;
 }
 
-li a,span {
+li a,.text {
   display: block;
   color: white;
-  text-align: center;
   text-decoration: none;
-  line-height: 52px;
   font-family: sans-serif;
 }
 
@@ -78,10 +103,17 @@ li a.hover:hover {
 body {
     display: flex;
     flex-flow: column;
-    height: 100%;
     margin: 0;
 }
 
+/* prevent overscroll */
+html,body {
+  position: fixed;
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+}
+
 iframe {
     flex: 1 1 auto;
     border: 0;
@@ -93,7 +125,7 @@ iframe {
 <body>
 <ul>
   <li class="logo"><img src="pix/icon.png"></li>
-  <li><span><?php echo($expcontent->name); ?></span></li>
+  <li class="title"><div class="container"><div class="text"><?php echo($expcontent->name); ?></div></div></li>
   <li class="right"><a class="hover" href="javascript:history.back();"><i class="fas fa-times"></i></a></li>
 </ul> 
 <iframe src='<?php echo($baseurl . "view-content/" . $expcontent->contentid . "?autoplay=true"); ?>' allow="autoplay; fullscreen"></iframe>
