feat(catalog): pad map fit and graph hubs filter

app/components/catalog/CatalogMap.vue

@@ -53,6 +53,7 @@ const props = withDefaults(defineProps<{
   initialCenter?: [number, number]
   initialZoom?: number
   infoLoading?: boolean
+  fitPaddingLeft?: number
   relatedPoints?: Array<{
     uuid: string
     name: string
@@ -67,6 +68,7 @@ const props = withDefaults(defineProps<{
   initialZoom: 2,
   useServerClustering: false,
   infoLoading: false,
+  fitPaddingLeft: 0,
   items: () => [],
   clusteredPoints: () => [],
   clusteredPointsByType: undefined,
@@ -88,6 +90,16 @@ const usesTypedClusters = computed(() => {
   return !!typed && Object.keys(typed).length > 0
 })
 
+const buildFitPadding = (base: number) => {
+  const extraLeft = Math.max(0, props.fitPaddingLeft || 0)
+  return {
+    top: base,
+    bottom: base,
+    left: base + extraLeft,
+    right: base
+  }
+}
+
 // Entity type icons - SVG data URLs with specific colors
 const createEntityIcon = (type: 'offer' | 'hub' | 'supplier', color: string) => {
   const icons = {
@@ -536,7 +548,7 @@ const initClientClusteringLayers = async (map: MapboxMapType) => {
         bounds.extend([item.longitude, item.latitude])
       }
     })
-    map.fitBounds(bounds, { padding: 50, maxZoom: 10 })
+    map.fitBounds(bounds, { padding: buildFitPadding(50), maxZoom: 10 })
     didFitBounds.value = true
   }
 }
@@ -962,7 +974,7 @@ watch(() => props.infoLoading, (loading, wasLoading) => {
       bounds.extend([p.longitude, p.latitude])
     })
     if (!bounds.isEmpty()) {
-      mapRef.value.fitBounds(bounds, { padding: 80, maxZoom: 12 })
+      mapRef.value.fitBounds(bounds, { padding: buildFitPadding(80), maxZoom: 12 })
     }
   }
 })
@@ -1013,7 +1025,7 @@ watch(() => props.clusteredPoints, (points) => {
       }
     })
     if (!bounds.isEmpty()) {
-      mapRef.value.fitBounds(bounds, { padding: 50, maxZoom: 6 })
+      mapRef.value.fitBounds(bounds, { padding: buildFitPadding(50), maxZoom: 6 })
       didFitBounds.value = true
     }
   }
@@ -1033,7 +1045,7 @@ watch(() => props.clusteredPointsByType, () => {
     })
   })
   if (!bounds.isEmpty()) {
-    mapRef.value.fitBounds(bounds, { padding: 50, maxZoom: 6 })
+    mapRef.value.fitBounds(bounds, { padding: buildFitPadding(50), maxZoom: 6 })
     didFitBounds.value = true
   }
 }, { deep: true, immediate: true })