Toggle fullscreen overlay on small screen heights, workaround/fix for #877

Models/Constants.ts

@@ -2,7 +2,7 @@ import {Utils} from "../Utils";
 
 export default class Constants {
 
-    public static vNumber = "0.22git .0";
+    public static vNumber = "0.22.1";
     
     public static ImgurApiKey = '7070e7167f0a25a'
     public static readonly mapillary_client_token_v4 = "MLY|4441509239301885|b40ad2d3ea105435bd40c7e76993ae85"

UI/Base/ScrollableFullScreen.ts

@@ -110,8 +110,9 @@ export default class ScrollableFullScreen extends UIElement {
 
         title = new Title(title, 2)
         title.SetClass("text-l sm:text-xl md:text-2xl w-full p-0 max-h-20vh overflow-y-auto self-center")
+        
         const contentWrapper =  new Combine([content])
-            .SetClass("block p-2 md:pt-4 w-full h-full overflow-y-auto md:max-h-65vh")
+            .SetClass("block p-2 md:pt-4 w-full h-full overflow-y-auto desktop:max-h-65vh")
         
         this._resetScrollSignal.addCallback(_ => {
             contentWrapper.ScrollToTop();
@@ -124,7 +125,7 @@ export default class ScrollableFullScreen extends UIElement {
               contentWrapper ,
                 // We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
             ]).SetClass("flex flex-col h-full relative bg-white")
-        ]).SetClass("fixed top-0 left-0 right-0 h-screen w-screen md:max-h-65vh md:w-auto md:relative z-above-controls md:rounded-xl overflow-hidden");
+        ]).SetClass("fixed top-0 left-0 right-0 h-screen w-screen desktop:max-h-65vh md:w-auto md:relative z-above-controls md:rounded-xl overflow-hidden");
 
     }
 

css/index-tailwind-output.css

@@ -1086,10 +1086,6 @@ video {
   height: 0px;
 }
 
-.h-40 {
-  height: 10rem;
-}
-
 .h-64 {
   height: 16rem;
 }
@@ -2672,10 +2668,6 @@ input {
     height: 3rem;
   }
 
-  .md\:max-h-65vh {
-    max-height: 65vh;
-  }
-
   .md\:w-2\/6 {
     width: 33.333333%;
   }
@@ -2789,3 +2781,4 @@ input {
     display: inline;
   }
 }
+

css/mobile.css

@@ -2,11 +2,16 @@
 Contains tweaks for small screens
 */
 
-@media only screen and (min-width: 769px) {
+@media only screen and (min-width: 769px) and (min-height: 700px) {
 
     .only-on-mobile {
         display: none !important;
     }
+
+    .desktop\:max-h-65vh {
+        max-height: 65vh;
+    }
+
 }
 
 
@@ -32,7 +37,7 @@ Contains tweaks for small screens
 
 }
 
-@media only screen and (max-width: 768px), only screen and (max-height: 768px) {
+@media only screen and (max-width: 768px), only screen and (max-height: 700px) {
 
 
     .hidden-on-mobile {

index.css

@@ -647,3 +647,4 @@ input {
     
     
 }
+

index.html

@@ -55,26 +55,19 @@
     <!-- DECORATION 0 END -->
 </div>
 
-<div class="hidden md:hidden fixed inset-0 block z-above-controls" id="fullscreen"></div>
 <div class="z-index-above-map pointer-events-none" id="topleft-tools">
     <div class="p-3 flex flex-col items-end sm:items-start sm:flex-row sm:flex-wrap w-full sm:justify-between">
         <div class="shadow rounded-full h-min w-full overflow-hidden sm:max-w-sm pointer-events-auto"
              id="searchbox"></div>
         <div class="m-1 pointer-events-auto" id="userbadge"></div>
     </div>
-    <div class="rounded-3xl overflow-hidden ml-3" id="messagesbox"></div>
 </div>
 
-<div class="absolute bottom-3 left-3 rounded-3xl z-above-map" id="bottom-left"></div>
-<div class="absolute bottom-3 right-2 rounded-3xl z-above-map" id="bottom-right"></div>
-
 <div class="clutter absolute h-24 left-24 right-24 top-56 text-xl text-center"
      id="centermessage" style="z-index: 4000">
     Loading MapComplete, hang on...
 </div>
 
-<span class="absolute" id="belowmap" style="z-index: -1">Below</span>
-<div id="leafletDiv"></div>
 
 <script src="./all_themes_index.ts"></script>
 <script async data-goatcounter="https://pietervdvn.goatcounter.com/count" src="//gc.zgo.at/count.js"></script>

theme.html

@@ -48,7 +48,7 @@
 </div>
 
 <div class="very-small-screen fixed inset-0 block z-above-controls" id="on-small-screen"></div>
-<div class="hidden md:hidden fixed inset-0 block z-above-controls hidden-on-very-small-screen" id="fullscreen"></div>
+<div class="only-on-mobile fixed inset-0 block z-above-controls hidden-on-very-small-screen" id="fullscreen"></div>
 <div class="z-index-above-map pointer-events-none" id="topleft-tools">
     <div class="p-3 flex flex-col items-end sm:items-start sm:flex-row sm:flex-wrap w-full sm:justify-between">
         <div class="shadow rounded-full h-min w-full overflow-hidden sm:max-w-sm pointer-events-auto"