Fix pointer events on map controls (#672)

The fact that this element takes up the full width was causing
interaction problems. If you tried to draw on top of it, it was not
possible.
<img width="1401" alt="image"
src="https://github.com/NASA-IMPACT/veda-ui/assets/1090606/c84c1390-3251-4926-b80b-52390ee76c5b">

This PR removes pointer events from the parents, including them only on
the children.

@nerik This may need to be applied to the new map approach as well. I'd
ask that you please check if it is needed.

app/scripts/components/common/mapbox/map-coords.tsx

@@ -11,8 +11,10 @@ import { round } from '$utils/format';
 const MapCoordsWrapper = styled.div`
   /* Large width so parent will wrap */
   width: 100vw;
+  pointer-events: none !important;
 
   ${Button} {
+    pointer-events: auto;
     background: ${themeVal('color.base-400a')};
     font-weight: ${themeVal('type.base.regular')};
     font-size: 0.75rem;

app/scripts/components/common/mapbox/map.tsx

@@ -137,8 +137,6 @@ export function SimpleMap(props: SimpleMapProps): ReactElement {
 
     mapRef.current = mbMap;
 
-    mapRef.current.addControl(mapCoordsControl, 'bottom-left');
-
     if (onProjectionChange && projection) {
       mapRef.current.addControl(mapOptionsControl, 'top-left');
     }
@@ -162,6 +160,8 @@ export function SimpleMap(props: SimpleMapProps): ReactElement {
 
     // Add zoom controls without compass.
     if (mapOptions.interactive !== false) {
+      mapRef.current.addControl(mapCoordsControl, 'bottom-left');
+
       mbMap.addControl(
         new NavigationControl({ showCompass: false }),
         'top-left'

app/scripts/components/common/mapbox/mapbox-style-override.js

@@ -27,11 +27,15 @@ const MapboxStyleOverride = css`
       gap: ${variableGlsp(0.5)};
       align-items: flex-start;
       float: none;
-      pointer-events: auto;
     }
 
     .mapboxgl-ctrl {
       margin: 0;
+      pointer-events: none;
+
+      > * {
+        pointer-events: auto;
+      }
     }
 
     .mapboxgl-ctrl-attrib {