Fix: style tweaks to link feature

langs/en.json

@@ -407,7 +407,8 @@
         "isDeleted": "Deleted",
         "nearby": {
             "link": "This picture shows the object",
-            "seeNearby": "Browse and link nearby pictures"
+            "seeNearby": "Browse and link nearby pictures",
+            "title": "Nearby streetview imagery"
         },
         "pleaseLogin": "Please log in to add a picture",
         "respectPrivacy": "Do not photograph people nor license plates. Do not upload Google Maps, Google Streetview or other copyrighted sources.",

src/UI/Popup/NearbyImages.svelte

@@ -11,6 +11,8 @@ import type { Feature } from "geojson";
 import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
 import Loading from "../Base/Loading.svelte";
 import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders";
+import Tr from "../Base/Tr.svelte";
+import Translations from "../i18n/Translations";
 
 export let tags: Store<OsmTags>;
 export let state: SpecialVisualizationState;
@@ -30,12 +32,23 @@ let images: Store<P4CPicture[]> = imagesProvider.store.map(images => images.slic
 
 </script>
 
-{#if $images.length === 0}
+<div class="interactive rounded-2xl border-interactive p-2">
-  <Loading />
+  <div class="flex justify-between">
-{:else}
+
-  <div class="py-2 interactive overflow-x-auto w-full flex space-x-1">
+    <h4>
-    {#each $images as image (image.pictureUrl)}
+      <Tr t={Translations.t.image.nearby.title} />
-      <LinkableImage {tags} {image} {state} {lon} {lat} {feature} {layer} {linkable} />
+    </h4>
-    {/each}
+    <slot name="corner" />
   </div>
-{/if}
+  {#if $images.length === 0}
+    <Loading />
+  {:else}
+    <div class="overflow-x-auto w-full flex space-x-1" style="scroll-snap-type: x proximity">
+      {#each $images as image (image.pictureUrl)}
+        <span class="w-fit shrink-0" style="scroll-snap-align: start">
+          <LinkableImage {tags} {image} {state} {lon} {lat} {feature} {layer} {linkable} />
+        </span>
+      {/each}
+    </div>
+  {/if}
+</div>

src/UI/Popup/NearbyImagesCollapsed.svelte

@@ -9,6 +9,8 @@
   import NearbyImages from "./NearbyImages.svelte";
   import Svg from "../../Svg";
   import ToSvelte from "../Base/ToSvelte.svelte";
+  import { XCircleIcon } from "@babeard/svelte-heroicons/solid";
+  import exp from "constants";
 
   export let tags: Store<OsmTags>;
   export let state: SpecialVisualizationState;
@@ -24,7 +26,9 @@
 </script>
 
 {#if expanded}
-  <NearbyImages {tags} {state} {lon} {lat} {feature} {linkable}/>
+  <NearbyImages {tags} {state} {lon} {lat} {feature} {linkable}>
+    <XCircleIcon slot="corner" class="w-6 h-6 cursor-pointer" on:click={() => {expanded = false}}/>
+  </NearbyImages>
 {:else}
   <button class="w-full flex items-center" on:click={() => { expanded = true; }}>
     <ToSvelte construct={ Svg.camera_plus_svg().SetClass("block w-8 h-8 p-1 mr-2 ")}/>