diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index 9efb708fc6..5c0a07a0cc 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -7633,6 +7633,10 @@ svg.apply-fill path {
   .lg\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+
+  .lg\:flex-row {
+    flex-direction: row;
+  }
 }
 
 @media (min-width: 1280px) {
diff --git a/src/UI/Base/Copyable.svelte b/src/UI/Base/Copyable.svelte
index e39ba28c8c..cdc9747ad3 100644
--- a/src/UI/Base/Copyable.svelte
+++ b/src/UI/Base/Copyable.svelte
@@ -1,59 +1,61 @@
 <script lang="ts">
-  
-import { Utils } from "../../Utils"
-import Share from "@babeard/svelte-heroicons/solid/Share"
-import { DocumentDuplicateIcon } from "@rgossiaux/svelte-heroicons/outline"
-import Tr from "./Tr.svelte"
-import Translations from "../i18n/Translations"
-import ThemeViewState from "../../Models/ThemeViewState"
-const tr = Translations.t.general.sharescreen
 
-export let text: string
-export let state: ThemeViewState = undefined
-async function shareCurrentLink() {
-  await navigator.share({
-    title: Translations.W(state.layout.title)?.ConstructElement().textContent ?? "MapComplete",
-    text: Translations.W(state.layout.description)?.ConstructElement().textContent ?? "",
-    url: text,
-  })
-}
+  import { Utils } from "../../Utils"
+  import Share from "@babeard/svelte-heroicons/solid/Share"
+  import { DocumentDuplicateIcon } from "@rgossiaux/svelte-heroicons/outline"
+  import Tr from "./Tr.svelte"
+  import Translations from "../i18n/Translations"
+  import ThemeViewState from "../../Models/ThemeViewState"
 
-let isCopied = false
+  const tr = Translations.t.general.sharescreen
 
-async function copyCurrentLink() {
-  await navigator.clipboard.writeText(text)
-  isCopied = true
-  await Utils.waitFor(5000)
-  isCopied = false
-}
+  export let text: string
+  export let state: ThemeViewState = undefined
+
+  async function shareCurrentLink() {
+    await navigator.share({
+      title: Translations.W(state.layout.title)?.ConstructElement().textContent ?? "MapComplete",
+      text: Translations.W(state.layout.description)?.ConstructElement().textContent ?? "",
+      url: text,
+    })
+  }
+
+  let isCopied = false
+
+  async function copyCurrentLink() {
+    await navigator.clipboard.writeText(text)
+    isCopied = true
+    await Utils.waitFor(5000)
+    isCopied = false
+  }
 </script>
 
-<div class="flex flex-col">
+<div class="flex flex-col w-full">
+
+  <div class="flex w-full">
+    <div class="literal-code w-full" on:click={(e) => Utils.selectTextIn(e.target)}>
+      {text}
+    </div>
+    <div class="flex flex-col lg:flex-row">
+      {#if typeof navigator?.share === "function" && state !== undefined}
+        <button class="h-8 w-8 shrink-0 p-1" on:click={shareCurrentLink}>
+          <Share />
+        </button>
+      {/if}
+      {#if navigator.clipboard !== undefined}
+        <button class="no-image-background h-8 w-8 shrink-0 p-1" on:click={copyCurrentLink}>
+          <DocumentDuplicateIcon />
+        </button>
+      {/if}
+    </div>
+
 
-<div class="flex">
-  <div class="literal-code" on:click={(e) => Utils.selectTextIn(e.target)}>
-    {text}
-  </div>
-  <div class="flex flex-col">
-    {#if typeof navigator?.share === "function" && state !== undefined}
-      <button class="h-8 w-8 shrink-0 p-1" on:click={shareCurrentLink}>
-        <Share />
-      </button>
-    {/if}
-    {#if navigator.clipboard !== undefined}
-      <button class="no-image-background h-8 w-8 shrink-0 p-1" on:click={copyCurrentLink}>
-        <DocumentDuplicateIcon />
-      </button>
-    {/if}
   </div>
 
 
-</div>
-
-
-<div class="flex justify-center">
-  {#if isCopied}
-    <Tr t={tr.copiedToClipboard} cls="thanks m-2" />
-  {/if}
-</div>
+  <div class="flex justify-center">
+    {#if isCopied}
+      <Tr t={tr.copiedToClipboard} cls="thanks m-2" />
+    {/if}
+  </div>
 </div>