fix(ai): stabilize message hover layout

This commit is contained in:
t8y2 committed 2026-07-15 16:42:33 +08:00
1 parent 709a110804
commit c29ad9ba17
2 files changed
+53 -3

No files matched your search

@@ -1799,7 +1799,7 @@ async function openExternalUrl(url: string) {
<div class="flex flex-col gap-3 p-3">
<template v-for="(msg, i) in visibleMessages" :key="i">
<div v-if="msg.role === 'user'" class="group flex justify-end">
<div class="min-w-0 max-w-[85%]" :class="{ 'w-[85%]': editingMessageIndex === i }">
<div class="relative min-w-0 max-w-[85%]" :class="{ 'w-[85%]': editingMessageIndex === i }">
<template v-if="editingMessageIndex === i">
<div v-if="editingMentions.length" class="mb-1.5 flex flex-wrap justify-end gap-1">
<button
@@ -1831,8 +1831,14 @@ async function openExternalUrl(url: string) {
</div>
</template>
<template v-else>
<div class="flex items-start gap-1">
<button v-if="!isGenerating" class="mt-1 hidden h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground group-hover:flex" :title="t('ai.editMessage')" @click="startEditMessage(i)">
<div class="min-w-0">
<!-- Keep the hover action out of normal flow so message wrapping stays stable. -->
<button
v-if="!isGenerating"
class="pointer-events-none absolute right-full top-1 mr-1 flex h-5 w-5 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-muted hover:text-foreground focus:pointer-events-auto focus:opacity-100 group-hover:pointer-events-auto group-hover:opacity-100"
:title="t('ai.editMessage')"
@click="startEditMessage(i)"
>
<Pencil class="h-3 w-3" />
</button>
<div class="min-w-0 rounded-lg bg-primary px-3 py-2 text-xs text-primary-foreground">