From c0272f37426ee38e2588ed2308a66099b0dbce2e Mon Sep 17 00:00:00 2001
From: Andrew Tavis McAllister <andrew.t.mcallister@gmail.com>
Date: Fri, 27 Sep 2024 01:02:43 +0200
Subject: [PATCH] #835 Close Safari buttom bar for fullscreen map

---
 frontend/components/media/MediaMap.vue | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/frontend/components/media/MediaMap.vue b/frontend/components/media/MediaMap.vue
index e82c14abf..233796841 100644
--- a/frontend/components/media/MediaMap.vue
+++ b/frontend/components/media/MediaMap.vue
@@ -29,6 +29,13 @@ const isTouchDevice =
   "ontouchstart" in window ||
   navigator.maxTouchPoints > 0;
 
+const applyMaxWindowHeight = () => {
+  document.documentElement.style.setProperty(
+    "--app-height",
+    `${window.innerHeight}px`
+  );
+};
+
 function isWebglSupported() {
   if (window.WebGLRenderingContext) {
     const canvas = document.createElement("canvas");
@@ -242,6 +249,8 @@ onMounted(() => {
           })
         );
 
+        map.on("fullscreenchange", applyMaxWindowHeight);
+
         const popup = new maplibregl.Popup({
           offset: 25,
         }).setHTML(
@@ -433,3 +442,18 @@ onMounted(() => {
     });
 });
 </script>
+
+<style scoped>
+:root {
+  --app-height: 100%;
+}
+html,
+body {
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  height: var(--app-height);
+}
+</style>