UI: small tweaks, fix #2429

public/css/index-tailwind-output.css

@@ -1530,6 +1530,10 @@ input[type="range"].range-lg::-moz-range-thumb {
   margin-left: 1rem;
 }
 
+.ml-6 {
+  margin-left: 1.5rem;
+}
+
 .mr-0\.5 {
   margin-right: 0.125rem;
 }

src/UI/Image/LinkableImage.svelte

@@ -19,6 +19,8 @@
   import ThemeViewState from "../../Models/ThemeViewState"
   import { MenuState } from "../../Models/MenuState"
   import { LicenseInfo } from "../../Logic/ImageProviders/LicenseInfo"
+  import Tr from "../Base/Tr.svelte"
+  import { ExternalLinkIcon } from "@rgossiaux/svelte-heroicons/solid"
 
   export let tags: UIEventSource<OsmTags>
   export let state: ThemeViewState
@@ -26,6 +28,7 @@
   export let feature: Feature
   export let layer: LayerConfig
 
+
   export let highlighted: UIEventSource<string> = undefined
   export let nearbyFeatures: Feature[] | Store<Feature[]> = []
   export let linkable = true
@@ -121,7 +124,7 @@
       <LoginToggle {state} silentFail={true} hiddenFail={true}>
         {#if linkable}
           <label>
-            <input bind:checked={$isLinked} type="checkbox" />
+            <input bind:checked={$isLinked} type="checkbox" class="ml-4" />
             <SpecialTranslation t={t.link} {tags} {state} {layer} {feature} />
           </label>
         {/if}

src/UI/Popup/QrCode.svelte

@@ -83,6 +83,6 @@
         <div class={sideTextClass}>{$sideTextSub}</div>
       {/if}
     </div>
-    <a href={$url} target="_blank" class="subtle text-sm">{$url}</a>
+    <a href={$url} target="_blank" class="subtle text-xs break-all">{$url}</a>
   </div>
 {/if}