DBC22-6090: Disabling panel resize feature inside the panel to allow only scrolling

Author: minORC

src/frontend/src/Components/map/Map.js

@@ -1131,7 +1131,13 @@ export default function DriveBCMap(props) {
                   </button>
                 }
 
-                <div className="panel-content">
+                <div
+                  className="panel-content"
+                  onPointerDown={(e) => {
+                    if (e.target.closest('.popup__content')) {
+                      e.stopPropagation();
+                    }
+                  }}>
                   <div className="drawer-drag-handle"></div>
 
                   {renderPanel(

src/frontend/src/Components/map/Map.scss

@@ -498,6 +498,7 @@
     .popup__content {
       overflow-y: scroll;
       height: calc(var(--drawer-snap-point, 100%) - 52px);
+      touch-action: pan-y;
     }
   }
 

src/frontend/src/Components/report/ReportMap.js

@@ -536,8 +536,8 @@ export function ReportMap(props) {
         >
           <Drawer.Portal container={mapElement.current}>
             <Drawer.Overlay className="drawer-overlay" />
-            <Drawer.Content 
-              className={`drawer-content ${snap === '80%' ? 'snap-80' : ''}`} 
+            <Drawer.Content
+              className={`drawer-content ${snap === '80%' ? 'snap-80' : ''}`}
               ref={drawerRef}>
               <button
                 className="close-panel"
@@ -550,7 +550,13 @@ export function ReportMap(props) {
                 }}>
                 <FontAwesomeIcon icon={faXmark} />
               </button>
-              <div className="panel-content">
+              <div
+                className="panel-content"
+                onPointerDown={(e) => {
+                  if (e.target.closest('.popup__content')) {
+                    e.stopPropagation();
+                  }
+                }}>
                 <div className="drawer-drag-handle"></div>
                 {openPanel && renderPanel()}
               </div>

src/frontend/src/Components/report/ReportMap.scss

@@ -573,6 +573,7 @@
 
       .popup__content {
         overflow-y: scroll;
+        touch-action: pan-y;
       }
     }