From 017e134cd8a11f4570ff772460a2b8d3a8727580 Mon Sep 17 00:00:00 2001
From: Pavel Jankoski <pavel.jankoski@thethingsindustries.com>
Date: Mon, 7 Oct 2024 16:17:01 +0200
Subject: [PATCH] console: Fix PR remarks

---
 pkg/webui/components/map/index.js                 | 10 +++++-----
 pkg/webui/console/containers/sidebar/sidebar.styl |  4 ++++
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/pkg/webui/components/map/index.js b/pkg/webui/components/map/index.js
index 565e1418b3..70891ceebb 100644
--- a/pkg/webui/components/map/index.js
+++ b/pkg/webui/components/map/index.js
@@ -108,7 +108,7 @@ const MarkerRenderer = ({ marker }) => {
 
 const Controller = ({ onClick, centerOnMarkers, markers, bounds }) => {
   const map = useMap()
-  const [userInteracted, setUserInteracted] = useState(false)
+  const [useManualZoom, setUseManualZoom] = useState(false)
 
   useEffect(() => {
     const handleWheel = e => {
@@ -119,12 +119,12 @@ const Controller = ({ onClick, centerOnMarkers, markers, bounds }) => {
         const zoomLevel = map.getZoom() - delta // Calculate the new zoom level
 
         map.setZoom(zoomLevel)
-        setUserInteracted(true) // Mark user interaction
+        setUseManualZoom(true) // Mark user interaction
       }
     }
 
     const handleUserInteracted = () => {
-      setUserInteracted(true) // Mark user interaction on zoom
+      setUseManualZoom(true) // Mark user interaction on zoom
     }
 
     // Ensure the map resizes correctly when the container changes size
@@ -142,10 +142,10 @@ const Controller = ({ onClick, centerOnMarkers, markers, bounds }) => {
   }, [map])
 
   useEffect(() => {
-    if (centerOnMarkers && markers.length > 1 && !userInteracted) {
+    if (centerOnMarkers && markers.length > 1 && !useManualZoom) {
       map.fitBounds(bounds, { padding: [50, 50], maxZoom: 14 })
     }
-  }, [map, centerOnMarkers, markers, bounds, userInteracted])
+  }, [map, centerOnMarkers, markers, bounds, useManualZoom])
 
   useMapEvent('click', onClick)
 
diff --git a/pkg/webui/console/containers/sidebar/sidebar.styl b/pkg/webui/console/containers/sidebar/sidebar.styl
index 24c8b3a732..331e06f1b5 100644
--- a/pkg/webui/console/containers/sidebar/sidebar.styl
+++ b/pkg/webui/console/containers/sidebar/sidebar.styl
@@ -24,6 +24,10 @@
   left: 0
   height: 100vh
   sidebar-transition(left)
+  +media-query-min($bp.xl)
+    // Stylus has trouble adding multiple properties to a function
+    // so we have to overwrite it like this.
+    transition-property: left, width
   +media-query($bp.xxl)
     --sidebar-width: 22rem
   +media-query($bp.lg-xl)