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>
2026-08-28 09:24:30 -05:00
parent adc583aad6
commit a8d8f514ad
2 changed files with 54 additions and 34 deletions
@@ -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>