Keep library prompt tooltips open over the panel so they can be wheel-scrolled without vanishing on the way to the scrollbar.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/PromptPreviewTip.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="group relative shrink-0">
+    <button
+      type="button"
+      class="relative z-10 flex h-6 w-6 items-center justify-center rounded-full text-zinc-500 hover:text-amber-200"
+      :aria-label="ariaLabel"
+      title="Copy prompt"
+      @click.stop="emit('copy', text)"
+      @wheel.prevent="onIconWheel"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4">
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 16v-4M12 8h.01" stroke-linecap="round" />
+      </svg>
+    </button>
+    <div class="invisible absolute right-0 top-full z-20 -mt-1 pt-2 group-hover:visible group-focus-within:visible">
+      <div
+        ref="panel"
+        class="pointer-events-auto max-h-48 w-64 max-w-[calc(100vw-2rem)] overflow-y-auto overscroll-contain whitespace-pre-wrap break-words rounded-xl border border-white/10 bg-zinc-950 p-3 text-xs leading-relaxed text-zinc-300 shadow-2xl"
+      >
+        {{ text }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  text: string
+  ariaLabel: string
+}>()
+
+const emit = defineEmits<{
+  copy: [text: string]
+}>()
+
+const panel = ref<HTMLElement | null>(null)
+
+function onIconWheel(event: WheelEvent) {
+  const el = panel.value
+  if (!el) return
+  el.scrollTop += event.deltaY
+}
+</script>

pages/index.vue

@@ -1172,23 +1172,11 @@
                         @blur="saveRename(entry.group.head, true)"
                       >
                       <p v-else class="min-w-0 flex-1 truncate text-sm font-medium">{{ collectionTitle(entry.group) }}</p>
-                      <div class="group relative shrink-0">
+                      <PromptPreviewTip
-                        <button
+                        :text="familyScript(entry.group.parts)"
-                          type="button"
-                          class="flex h-6 w-6 items-center justify-center rounded-full text-zinc-500 hover:text-amber-200"
                         :aria-label="'Copy prompt for ' + collectionTitle(entry.group)"
-                          title="Copy prompt"
+                        @copy="copyPrompt"
-                          @click.stop="copyPrompt(familyScript(entry.group.parts))"
+                      />
-                        >
-                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4">
-                            <circle cx="12" cy="12" r="10" />
-                            <path d="M12 16v-4M12 8h.01" stroke-linecap="round" />
-                          </svg>
-                        </button>
-                        <div class="pointer-events-none invisible absolute right-0 top-7 z-20 max-h-48 w-64 max-w-[calc(100vw-2rem)] overflow-y-auto whitespace-pre-wrap break-words rounded-xl border border-white/10 bg-zinc-950 p-3 text-xs leading-relaxed text-zinc-300 shadow-2xl group-hover:visible group-focus-within:visible">
-                          {{ familyScript(entry.group.parts) }}
-                        </div>
-                      </div>
                     </div>
                     <p class="text-xs text-zinc-500">{{ clipMetaLine(entry.group.head) }}</p>
                     <p v-if="entry.group.head.globalLocks" class="mt-1 text-[11px] text-zinc-600">Global locks saved with this collection.</p>
@@ -1325,23 +1313,11 @@
                         @blur="saveRenameStill(entry.stillGroup.head, true)"
                       >
                       <p v-else class="min-w-0 flex-1 truncate text-sm font-medium">{{ stillCollectionTitle(entry.stillGroup) }}</p>
-                      <div class="group relative shrink-0">
+                      <PromptPreviewTip
-                        <button
+                        :text="stillFamilyScript(entry.stillGroup.parts)"
-                          type="button"
-                          class="flex h-6 w-6 items-center justify-center rounded-full text-zinc-500 hover:text-amber-200"
                         :aria-label="'Copy prompt for ' + stillCollectionTitle(entry.stillGroup)"
-                          title="Copy prompt"
+                        @copy="copyPrompt"
-                          @click.stop="copyPrompt(stillFamilyScript(entry.stillGroup.parts))"
+                      />
-                        >
-                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4">
-                            <circle cx="12" cy="12" r="10" />
-                            <path d="M12 16v-4M12 8h.01" stroke-linecap="round" />
-                          </svg>
-                        </button>
-                        <div class="pointer-events-none invisible absolute right-0 top-7 z-20 max-h-48 w-64 max-w-[calc(100vw-2rem)] overflow-y-auto whitespace-pre-wrap break-words rounded-xl border border-white/10 bg-zinc-950 p-3 text-xs leading-relaxed text-zinc-300 shadow-2xl group-hover:visible group-focus-within:visible">
-                          {{ stillFamilyScript(entry.stillGroup.parts) }}
-                        </div>
-                      </div>
                     </div>
                     <p class="text-xs text-zinc-500">{{ stillMetaLine(entry.stillGroup.head) }}</p>
                     <div class="mt-2 flex flex-wrap items-center gap-3">