From f7fc2885fc6c0be7a6e52de45089f67d9aaeaeea Mon Sep 17 00:00:00 2001
From: mwbernard <mwbernard9@gmail.com>
Date: Thu, 30 Nov 2023 15:44:09 -0800
Subject: [PATCH 1/2] Fix mobile tooltip position

---
 vacs-map-app/src/components/TooltipWrapper.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/vacs-map-app/src/components/TooltipWrapper.vue b/vacs-map-app/src/components/TooltipWrapper.vue
index 850a998..0f2035d 100644
--- a/vacs-map-app/src/components/TooltipWrapper.vue
+++ b/vacs-map-app/src/components/TooltipWrapper.vue
@@ -126,4 +126,15 @@ const setPosition = (px, py) => {
 .top.left {
   transform: translateX(-100%) translateY(-100%);
 }
+
+@media only screen and (max-width: 720px) {
+  .tooltip {
+    top: unset !important;
+    bottom: 8rem !important;
+    left: 1rem !important;
+    transform: unset !important;
+  }
+}
 </style>
+
+

From eb42e6f8cd806c67e739269674d880d52f2eacfe Mon Sep 17 00:00:00 2001
From: mwbernard <mwbernard9@gmail.com>
Date: Thu, 30 Nov 2023 16:10:46 -0800
Subject: [PATCH 2/2] Set window height with js on app load

---
 vacs-map-app/src/App.vue                        | 17 +++++++++++++++--
 vacs-map-app/src/LandingPage.vue                |  3 +++
 vacs-map-app/src/assets/base.css                |  4 +++-
 .../src/components/layouts/LayoutOpen.vue       |  4 +++-
 .../src/components/layouts/LayoutOverview.vue   |  2 ++
 5 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/vacs-map-app/src/App.vue b/vacs-map-app/src/App.vue
index 09a1880..74510e5 100644
--- a/vacs-map-app/src/App.vue
+++ b/vacs-map-app/src/App.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { onMounted } from 'vue'
+import { onMounted, onUnmounted } from 'vue'
 import { RouterView } from 'vue-router'
 import { useCropYieldsStore } from '@/stores/cropYields'
 import { useCropInformationStore } from '@/stores/cropInformation'
@@ -17,6 +17,11 @@ const cropInformationStore = useCropInformationStore()
 const gridStore = useGridStore()
 const filtersStore = useFiltersStore()
 
+const documentHeight = () => {
+  const doc = document.documentElement
+  doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
+}
+
 onMounted(() => {
   gridStore.load()
   cropYieldsStore.load()
@@ -24,6 +29,13 @@ onMounted(() => {
 
   // initialize so pages load
   filtersStore.selectedCrop = filtersStore.availableCrops[0]
+
+  window.addEventListener('resize', documentHeight)
+  documentHeight
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize')
 })
 </script>
 
@@ -31,8 +43,9 @@ onMounted(() => {
 main {
   display: flex;
   flex-direction: column;
-  height: 100vh;
   width: 100vw;
+  height: 100vh;
+  height: var(--doc-height);
   overflow: hidden;
 }
 </style>
diff --git a/vacs-map-app/src/LandingPage.vue b/vacs-map-app/src/LandingPage.vue
index a33a2a6..ddd5330 100644
--- a/vacs-map-app/src/LandingPage.vue
+++ b/vacs-map-app/src/LandingPage.vue
@@ -144,6 +144,7 @@ const openModal = () => {
   display: flex;
   flex-direction: row;
   height: 100vh;
+  height: var(--doc-height);
   width: 100vw;
   background: var(--black);
   justify-content: space-between;
@@ -155,6 +156,7 @@ video {
   height: 100vh;
   min-width: 100vw;
   height: 100vh;
+  height: var(--doc-height);
 }
 
 .overlay {
@@ -163,6 +165,7 @@ video {
   left: 0;
   width: 100vw;
   height: 100vh;
+  height: var(--doc-height);
 
   display: flex;
   flex-direction: column;
diff --git a/vacs-map-app/src/assets/base.css b/vacs-map-app/src/assets/base.css
index 8552203..4a8d816 100644
--- a/vacs-map-app/src/assets/base.css
+++ b/vacs-map-app/src/assets/base.css
@@ -18,8 +18,10 @@
   --font-family-header: PPeiko-heavy;
   --font-family-h2: PPeiko-medium;
   --font-family-body: 'Work Sans';
-
   --shadow: 0px 0px 20px 0px rgba(255, 254, 254, 0.1);
+
+
+  --doc-height: 100%
 }
 
 *,
diff --git a/vacs-map-app/src/components/layouts/LayoutOpen.vue b/vacs-map-app/src/components/layouts/LayoutOpen.vue
index 1d430cd..07868e3 100644
--- a/vacs-map-app/src/components/layouts/LayoutOpen.vue
+++ b/vacs-map-app/src/components/layouts/LayoutOpen.vue
@@ -8,7 +8,9 @@
 
 <style scoped>
 .layout-open {
-  min-height: 100vh;
+  height: 100vh;
+  max-height: var(--doc-height);
+  min-height: var(--doc-height);
   width: 100vw;
 }
 </style>
diff --git a/vacs-map-app/src/components/layouts/LayoutOverview.vue b/vacs-map-app/src/components/layouts/LayoutOverview.vue
index e3e8316..98e3942 100644
--- a/vacs-map-app/src/components/layouts/LayoutOverview.vue
+++ b/vacs-map-app/src/components/layouts/LayoutOverview.vue
@@ -25,6 +25,8 @@ const topic = computed(() => topicUrlOptions.find(({ label }) => label === topic
 <style scoped>
 .layout-overview {
   height: 100vh;
+  max-height: var(--doc-height);
+  min-height: var(--doc-height);
   width: 100vw;
   display: flex;
   flex-direction: column;