style: prose copy button should only show when needed

Author: NamesMT

apps/frontend/app/components/mdc/CodeGroup.vue

@@ -40,7 +40,7 @@ function label(props: SlotVNodeProps) {
 </script>
 
 <template>
-  <div class="code-group-card">
+  <div class="code-group-card group/code-group">
     <div class="code-group">
       <div class="code-group-tabs">
         <div name="files">
@@ -57,7 +57,7 @@ function label(props: SlotVNodeProps) {
             {{ label(slot.props!) }}
           </div>
         </div>
-        <CodeCopy v-if="code" :code name="copy-btn" />
+        <CodeCopy v-if="code" class="opacity-0 group-hover/code-group:opacity-100" :code name="copy-btn" />
       </div>
     </div>
 

apps/frontend/app/components/mdc/prose/ProsePre.global.vue

@@ -52,14 +52,14 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div :data-header="props.showHeader" class="prose-pre-card">
+  <div :data-header="props.showHeader" class="group/pre-card prose-pre-card">
     <div v-if="props.showHeader && props.filename" name="header">
       <div v-if="icon" :class="`i-${icon}`" />
       <span> {{ props.filename }}</span>
-      <CodeCopy :code="props.code" name="copy-btn" />
+      <CodeCopy :code="props.code" class="opacity-0 group-hover/pre-card:opacity-100" name="copy-btn" />
     </div>
 
-    <span v-if="!props.filename" name="absolute-copy-btn"><CodeCopy :code="props.code" /></span>
+    <span v-if="!props.filename" name="absolute-copy-btn"><CodeCopy :code="props.code" class="opacity-0 group-hover/pre-card:opacity-100" /></span>
 
     <span v-if="!props.filename && !isSingleLine" name="absolute-language">
       {{ props.language }}