DBC22-6162: fixed map operations not working when tabbed out

Author: ray-oxd

src/frontend/src/pages/CameraDetailsPage.js

@@ -840,6 +840,7 @@ export default function CameraDetailsPage() {
                       <Tabs
                         className="mobile-tabs"
                         activeKey={activeTab}
+                        transition={false}
                         onSelect={selectedTab => setActiveTab(selectedTab)}>
                         <Tab
                           eventKey="webcam"
@@ -1071,6 +1072,7 @@ export default function CameraDetailsPage() {
                           </Tab>
                           <Tab
                             eventKey="nearby"
+                            className="nearby-tab"
                             title={
                               !largeScreen && (
                                 <span>

src/frontend/src/pages/CameraDetailsPage.scss

@@ -965,7 +965,7 @@
         bottom: 2.5rem;
         right: 0.5rem;
       }
-      
+
       .ol-attribution.attribution-control {
         bottom: 0.5rem;
         left: 0.5rem;
@@ -1031,6 +1031,21 @@
   .camera-imagery__nearby {
     margin-top: 2px;
   }
+
+  // Keep the map tab pane rendered even when tab not active
+  > .tab-pane.nearby-tab:not(.active) {
+    display: block !important;
+    position: fixed;
+    left: 0;
+    top: 0;
+    transform: translateX(-100%);
+    width: 100%;
+    height: calc(100vh - 470px);
+    min-height: 388px;
+    visibility: hidden;
+    pointer-events: none;
+    z-index: -1;
+  }
 }
 .loader-container {
   display: flex;