1 files changed, 10 insertions, 19 deletions
diff --git a/src/components/Code.svelte b/src/components/Code.svelte
index 52c6bcf2..1c25feb8 100644
--- a/src/components/Code.svelte
+++ b/src/components/Code.svelte
@@ -4,28 +4,19 @@
   let { sample } = $props();
 </script>
 
+{#snippet cp(something)}
+  <button type="button" class="ml-auto" onclick={() => copy(something)}>
+    <iconify-icon icon="ph:copy-bold" width="42"></iconify-icon>
+  </button>
+{/snippet}
+
 <div
   class="bg-primary text-primary-content rounded-lg p-4 flex gap-4 whitespace-pre-wrap font-mono items-center"
 >
-  <div class="overflow-x-scroll max-w-full scrollbar-hide">
+  <div
+    class="overflow-x-scroll max-w-full [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
+  >
     <div class="break-all min-w-[800px]">{samples[sample]}</div>
   </div>
-  <iconify-icon
-    icon="ph:copy-bold"
-    onclick={() => copy(samples[sample])}
-    width="42"
-    class="ml-auto cursor-pointer"
-  ></iconify-icon>
+  {@render cp(samples[sample])}
 </div>
-
-<style>
-  .scrollbar-hide::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* For IE, Edge and Firefox */
-  .scrollbar-hide {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-</style>