fix(component): detect comment overflow after render

src/components/CommentSection.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, nextTick } from 'vue'
 import { commentApi, commentAdminApi } from '@/api/client'
 import type { CommentResponse } from '@/generated/api'
 import { useAuthStore } from '@/stores/auth'
@@ -34,16 +34,20 @@ const content = ref('')
 const quotedComment = ref<CommentResponse | null>(null)
 const overflowIds = ref<Set<number>>(new Set())
 const expandedIds = ref<Set<number>>(new Set())
+const contentEls = new Map<number, HTMLElement>()
 
-function measureComment(id: number, el: Element | null) {
-  if (!el) return
-  const node = el as HTMLElement
-  const lh = parseFloat(getComputedStyle(node).lineHeight) || 22
-  if (node.scrollHeight > lh * 4 + 2) {
-    if (!overflowIds.value.has(id)) {
-      overflowIds.value = new Set([...overflowIds.value, id])
-    }
-  }
+function collectContentEl(id: number, el: unknown) {
+  if (el) contentEls.set(id, el as HTMLElement)
+  else contentEls.delete(id)
+}
+
+function detectOverflow() {
+  const next = new Set<number>()
+  contentEls.forEach((node, id) => {
+    const lh = parseFloat(getComputedStyle(node).lineHeight) || 22
+    if (node.scrollHeight > lh * 4 + 2) next.add(id)
+  })
+  overflowIds.value = next
 }
 
 function toggleExpand(id: number) {
@@ -120,6 +124,8 @@ async function load() {
   } finally {
     loading.value = false
   }
+  await nextTick()
+  detectOverflow()
 }
 
 async function onSubmit() {
@@ -231,7 +237,7 @@ onMounted(() => {
           <p
             class="comment-content"
             :class="{ 'content-clamped': overflowIds.has(comment.id!) && !expandedIds.has(comment.id!) }"
-            :ref="(el: unknown) => measureComment(comment.id!, el as Element | null)"
+            :ref="(el: unknown) => collectContentEl(comment.id!, el)"
             v-html="renderCommentContent(comment.content ?? '')"
           ></p>
           <button