From 172f412ed65cb1b7bd4dcc7e4bbcc8769782b2c8 Mon Sep 17 00:00:00 2001
From: Whitney Gould <78887901+whitneywind@users.noreply.github.com>
Date: Thu, 31 Oct 2024 18:23:10 -0700
Subject: [PATCH] fix for dynamic vertical centering on mobile (#2266)

---
 client/src/hooks/useMapbox.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/client/src/hooks/useMapbox.js b/client/src/hooks/useMapbox.js
index cbb9675e..fd1ed0ee 100644
--- a/client/src/hooks/useMapbox.js
+++ b/client/src/hooks/useMapbox.js
@@ -35,13 +35,21 @@ export const useMapbox = () => {
     const baseLongOffset = 0.08;
     const longitudeOffset = baseLongOffset * Math.pow(2, 11 - currentZoom);
 
-    // calculates latitude offset for mobile according to zoom level and takes screen height into account
-    const baseLatOffset = 0.05;
+    // calculates latitude offset for mobile according to zoom level and screen height
+    const baseLatOffset = 0.065;
     const screenHeight = window.innerHeight;
-    const referenceHeight = 800;
-    const screenHeightFactor = screenHeight / referenceHeight;
-    const latitudeOffset =
-      baseLatOffset * Math.pow(2, 11 - currentZoom) * screenHeightFactor;
+
+    function calculateLatOffset(screenHeight) {
+      const baseHeight = 550;
+      const rate = 0.006 / 50; // approximately 0.006 deg per 50 pixels
+      return 0.034 + (screenHeight - baseHeight) * rate;
+    }
+
+    const heightOffsetFactor = !screenHeight
+      ? baseLatOffset
+      : calculateLatOffset(screenHeight);
+
+    const latitudeOffset = heightOffsetFactor * Math.pow(2, 11 - currentZoom);
 
     mapbox.default.flyTo({
       center: [