Add map popup offset

2 files changed, 6 insertions, 1 deletions

diff --git a/modern/src/map/SelectedDeviceMap.js b/modern/src/map/SelectedDeviceMap.js
index 63847176..c46ea40e 100644
--- a/modern/src/map/SelectedDeviceMap.js
+++ b/modern/src/map/SelectedDeviceMap.js
@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 
 import { useSelector } from 'react-redux';
+import dimensions from '../theme/dimensions';
 import { map } from './Map';
 
 const SelectedDeviceMap = () => {
@@ -16,7 +17,10 @@ const SelectedDeviceMap = () => {
 
   useEffect(() => {
     if (mapCenter) {
-      map.easeTo({ center: mapCenter.position });
+      map.easeTo({
+        center: mapCenter.position,
+        offset: [0, -dimensions.popupMapOffset / 2],
+      });
     }
   }, [mapCenter]);
 
diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js
index e852f0b4..c2d60bb5 100644
--- a/modern/src/theme/dimensions.js
+++ b/modern/src/theme/dimensions.js
@@ -10,4 +10,5 @@ export default {
   columnWidthNumber: 130,
   columnWidthString: 160,
   columnWidthBoolean: 130,
+  popupMapOffset: 300,
 };