From f8b3929762a252eb049abfb23169e2f44ebd4afb Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 9 May 2023 15:00:01 +0200
Subject: [PATCH] fix: id component copy on click

---
 CONTRIBUTING.md              |  3 +++
 src/lib/components/id.svelte | 30 +++++++++++++++---------------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 607bb07f6..ad67fbd68 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -40,12 +40,15 @@ git clone https://github.com/appwrite/console.git appwrite-console
 ```
 
 ### 2. Install dependencies with npm
+
 Navigate to the Appwrite Console repository and install dependencies.
+
 ```bash
 cd appwrite-console && npm install
 ```
 
 ### 3. Install and run Appwrite locally
+
 When you run the Appwrite Console locally, it needs to point to a backend as well. The easiest way to do this is to run an Appwrite instance locally.
 
 Follow the [install instructions](https://appwrite.io/docs/installation) in the Appwrite docs.
diff --git a/src/lib/components/id.svelte b/src/lib/components/id.svelte
index c64dcb1f2..1b618f3d2 100644
--- a/src/lib/components/id.svelte
+++ b/src/lib/components/id.svelte
@@ -46,22 +46,22 @@
     }
 </script>
 
-<div
-    class="interactive-text-output is-buttons-on-top"
-    style:min-inline-size="0"
-    style:display="inline-flex">
-    <span
-        style:white-space="nowrap"
-        class="text u-line-height-1-5"
-        style:overflow="hidden"
-        use:truncateText>
-        <slot />
-    </span>
-    <div class="interactive-text-output-buttons">
-        <Copy {value} {event}>
+<Copy {value} {event}>
+    <div
+        class="interactive-text-output is-buttons-on-top"
+        style:min-inline-size="0"
+        style:display="inline-flex">
+        <span
+            style:white-space="nowrap"
+            class="text u-line-height-1-5"
+            style:overflow="hidden"
+            use:truncateText>
+            <slot />
+        </span>
+        <div class="interactive-text-output-buttons">
             <button class="interactive-text-output-button is-hidden" aria-label="copy text">
                 <span class="icon-duplicate" aria-hidden="true" />
             </button>
-        </Copy>
+        </div>
     </div>
-</div>
+</Copy>