feat(web): auto fit bounds for map modal (#20345)

web/src/lib/components/shared-components/map/map.svelte

@@ -56,6 +56,7 @@
     popup?: import('svelte').Snippet<[{ marker: MapMarkerResponseDto }]>;
     rounded?: boolean;
     showSimpleControls?: boolean;
+    autoFitBounds?: boolean;
   }
 
   let {
@@ -73,9 +74,21 @@
     popup,
     rounded = false,
     showSimpleControls = true,
+    autoFitBounds = true,
   }: Props = $props();
 
-  const initialCenter = center;
+  // Calculate initial bounds from markers once during initialization
+  const initialBounds = (() => {
+    if (!autoFitBounds || center || zoom !== undefined || !mapMarkers || mapMarkers.length === 0) {
+      return undefined;
+    }
+
+    const bounds = new maplibregl.LngLatBounds();
+    for (const marker of mapMarkers) {
+      bounds.extend([marker.lon, marker.lat]);
+    }
+    return bounds;
+  })();
 
   let map: maplibregl.Map | undefined = $state();
   let marker: maplibregl.Marker | null = null;
@@ -277,7 +290,9 @@
   style=""
   class="h-full {rounded ? 'rounded-2xl' : 'rounded-none'}"
   {zoom}
-  center={initialCenter}
+  {center}
+  bounds={initialBounds}
+  fitBoundsOptions={{ padding: 50, maxZoom: 15 }}
   attributionControl={false}
   diffStyleUpdates={true}
   onload={(event) => {

web/src/lib/modals/MapModal.svelte

@@ -8,10 +8,9 @@
   type Props = {
     onClose: (assetIds?: string[]) => void;
     mapMarkers: MapMarkerResponseDto[];
-    zoom?: number;
   };
 
-  let { onClose, mapMarkers, zoom }: Props = $props();
+  let { onClose, mapMarkers }: Props = $props();
 </script>
 
 <Modal title={$t('map')} size="giant" {onClose}>
@@ -26,15 +25,7 @@
             </div>
           {/await}
         {:then { default: Map }}
-          <Map
+          <Map clickable={false} {mapMarkers} onSelect={onClose} showSettings={false} rounded autoFitBounds />
-            center={undefined}
-            {zoom}
-            clickable={false}
-            {mapMarkers}
-            onSelect={onClose}
-            showSettings={false}
-            rounded
-          />
         {/await}
       </div>
     </div>