bfx: Apply workaround for mapboxgl-js bug

Version 1.8.0 of mapboxgl-js does not support a "padding" option
for the .flyTo() function.

Newer versions (up to 1.11.0-beta.1 as of this writing) fix this,
but come with a strange bug:
padding works perfectly initially,
but once a base has been selected for the first deployment,
all subsequent flyTo/fitBounds calls are off-center.

(My suspicion is that it's related to mapbox-gl-js #9477,[0]
in which padding is applied twice...?)

[0]: mapbox/mapbox-gl-js#9477

TODO.md

@@ -1,7 +1,8 @@
-* update to v1.9.0+ (1.9.0 adds support for a “padding” option on flyTo)
-  * submit bug report for map fit weirdness from 1.9.0 upgrade
-* flyTo point (vs. fitBounds) doesn’t handle the padding option?
 * Redo visual design
   * Add Reset/Finish buttons
   * Disable Finish button when deployments incomplete
 * Create guided tour
+
+<!--- deprioritized since we have a workaround! -->
+* update to v1.9.0+ (1.9.0 adds support for a “padding” option on flyTo)
+  * submit bug report for map fit weirdness from 1.9.0 upgrade

app/components/Map.jsx

@@ -43,7 +43,7 @@ export default function Map({
 
     switch (true) {
       case mapFit instanceof mapboxgl.LngLat:
-        map.current.flyTo({ center: mapFit, padding, zoom: 9 });
+        map.current.fitBounds(collectionBounds([mapFit]), { padding, maxZoom: 9 });
         break;
       case mapFit instanceof mapboxgl.LngLatBounds:
         map.current.fitBounds(mapFit, { padding, maxZoom: 9 });