From 002e5a354f66c48ba51d80fc4601a07f0b68ea3a Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Sat, 14 Sep 2024 09:03:43 -0700
Subject: [PATCH] Apply map padding to controls

---
 src/main/MainMap.jsx     |  2 +-
 src/map/MapPadding.js    | 22 ++++++++++++----------
 src/map/MapScale.js      |  2 +-
 src/map/core/MapView.jsx |  9 ---------
 4 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/src/main/MainMap.jsx b/src/main/MainMap.jsx
index 3b57c74533..3e8c4f943e 100644
--- a/src/main/MainMap.jsx
+++ b/src/main/MainMap.jsx
@@ -57,7 +57,7 @@ const MainMap = ({ filteredPositions, selectedPosition, onEventsClick }) => {
         <MapNotification enabled={eventsAvailable} onClick={onEventsClick} />
       )}
       {desktop && (
-        <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10)} />
+        <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10) + parseInt(theme.spacing(1.5), 10)} />
       )}
     </>
   );
diff --git a/src/map/MapPadding.js b/src/map/MapPadding.js
index b1927a1fa0..acf13dd9ba 100644
--- a/src/map/MapPadding.js
+++ b/src/map/MapPadding.js
@@ -2,17 +2,19 @@ import { useEffect } from 'react';
 
 import { map } from './core/MapView';
 
-const MapPadding = ({
-  top, right, bottom, left,
-}) => {
+const MapPadding = ({ left }) => {
   useEffect(() => {
-    map.setPadding({
-      top, right, bottom, left,
-    });
-    return () => map.setPadding({
-      top: 0, right: 0, bottom: 0, left: 0,
-    });
-  }, [top, right, bottom, left]);
+    const topLeft = document.querySelector('.maplibregl-ctrl-bottom-left');
+    const bottomLeft = document.querySelector('.maplibregl-ctrl-bottom-left');
+    topLeft.style.left = `${left}px`;
+    bottomLeft.style.left = `${left}px`;
+    map.setPadding({ left });
+    return () => {
+      topLeft.style.left = 0;
+      bottomLeft.style.left = 0;
+      map.setPadding({ top: 0, right: 0, bottom: 0, left: 0 });
+    };
+  }, [left]);
 
   return null;
 };
diff --git a/src/map/MapScale.js b/src/map/MapScale.js
index c8a724c904..3147f11949 100644
--- a/src/map/MapScale.js
+++ b/src/map/MapScale.js
@@ -9,7 +9,7 @@ const MapScale = () => {
   const control = useMemo(() => new maplibregl.ScaleControl(), []);
 
   useEffect(() => {
-    map.addControl(control, 'bottom-right');
+    map.addControl(control, 'bottom-left');
     return () => map.removeControl(control);
   }, [control]);
 
diff --git a/src/map/core/MapView.jsx b/src/map/core/MapView.jsx
index 04fcfe6576..b48652f09c 100644
--- a/src/map/core/MapView.jsx
+++ b/src/map/core/MapView.jsx
@@ -24,15 +24,6 @@ export const map = new maplibregl.Map({
   container: element,
 });
 
-map.on('load', () => {
-  const container = document.querySelector('.maplibregl-ctrl-bottom-right');
-  if (container) {
-    container.style.display = 'flex';
-    container.style.flexDirection = 'row';
-    container.style.alignItems = 'flex-end';
-  }
-});
-
 let ready = false;
 const readyListeners = new Set();