fixes edit map reactivity issues

web/src/lib/components/trail/map_with_elevation_maplibre.svelte

@@ -488,7 +488,7 @@
                 icon: "fa-regular fa-circle",
                 fontSize: "xs",
                 width: 4,
-                backgroundColor: "primary",
+                backgroundColor: "bg-primary",
                 fontColor: "white",
             },
             {},

web/src/lib/components/trail/photo_picker.svelte

@@ -139,7 +139,7 @@
     />
     <div class="flex overflow-x-auto gap-x-3">
         {#each (photos ?? []).concat(photoPreviews) as photo, i}
-            <div class="shrink-0 grow-0 basis-auto overflow-hidden">
+            <div class="shrink-0 grow-0 basis-auto">
                 <PhotoCard
                     src={i >= photos.length ? photo : getFileURL(parent, photo)}
                     on:delete={() => handlePhotoDelete(i)}

web/src/lib/util/maplibre_util.ts

@@ -10,7 +10,7 @@ import { haversineDistance } from "$lib/models/gpx/utils";
 export class FontawesomeMarker extends M.Marker {
     constructor(options: { icon: string, fontSize?: string, width?: number, backgroundColor?: string, fontColor?: string, id?: string }, markerOptions?: M.MarkerOptions) {
         const element = document.createElement('div')
-        element.className = `cursor-pointer flex items-center justify-center w-${options.width ?? 7} aspect-square bg-${options.backgroundColor ?? "gray-500"} rounded-full text-${options.fontSize ?? "normal"}`
+        element.className = `cursor-pointer flex items-center justify-center w-${options.width ?? 7} aspect-square ${options.backgroundColor ?? "bg-gray-500"} rounded-full text-${options.fontSize ?? "normal"}`
         element.id = options.id ?? "";
         super({ element: element, ...markerOptions });