From 078878df3fbae911b2f8f6503745c54d1d59d87b Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Mon, 29 May 2023 15:07:54 +0200
Subject: [PATCH] Improve copy button behavior

---
 src/components/general/CopyableTextfield.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/general/CopyableTextfield.vue b/src/components/general/CopyableTextfield.vue
index b37dc9c9..83819171 100644
--- a/src/components/general/CopyableTextfield.vue
+++ b/src/components/general/CopyableTextfield.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="position-relative">
+  <div class="copy-container position-relative">
     <i-mdi-content-copy
       v-if="isSupported && isValid"
       role="button"
-      class="position-absolute end-0 mt-1 me-2"
+      class="copy-button position-absolute end-0 mt-1 me-2"
       @click="copy(content)"
     />
     <pre class="text-start border p-1"><code>{{ content }}</code></pre>
@@ -21,4 +21,16 @@ defineProps({
 const { copy, isSupported } = useClipboard();
 </script>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.copy-container {
+  .copy-button {
+    opacity: 0;
+  }
+
+  &:hover {
+    .copy-button {
+      opacity: 1;
+    }
+  }
+}
+</style>