fix: comment bubble got cut off (#2756)

* fix: comment bubble got cut off

* fix: update floating comments remeasure logic

* fix: make test pass

* fix: address review comments

* test: add regression test for comment bubble clipping (SD-2464)

Behavior test that creates 8+ tracked changes, clicks the last bubble,
and asserts the sidebar uses overflow: visible so bubbles are never
clipped by the parent container.

---------

Co-authored-by: Caio Pizzol <caio@harbourshare.com>

Author: VladaHarbour

packages/superdoc/src/SuperDoc.vue

@@ -1642,8 +1642,7 @@ const getPDFViewer = () => {
   min-width: 300px;
   width: 300px;
   height: 100%;
-  overflow-y: hidden;
-  overflow-x: hidden;
+  overflow: visible;
 }
 
 .superdoc__layers {

packages/superdoc/src/components/CommentsLayer/FloatingComments.vue

@@ -205,6 +205,13 @@ const totalHeight = computed(() => {
   return max + 50;
 });
 
+// The inner sidebar is translated by sidebarOffsetY. When shifted down, the
+// rendered bottom edge can exceed totalHeight and get clipped by parent scroll
+// containers. Expand wrapper height to include positive translate offset.
+const wrapperMinHeight = computed(() => {
+  return totalHeight.value + Math.max(0, sidebarOffsetY.value);
+});
+
 // Set up IntersectionObserver to track which placeholders are near the viewport
 const setupObserver = () => {
   if (observer) observer.disconnect();
@@ -287,6 +294,17 @@ const handleResize = (comment) => {
     const dialog = el.querySelector('.comments-dialog');
     if (!dialog) return;
     storeHeight(key, dialog.getBoundingClientRect().height);
+
+    const isActiveThread = key === activeCommentKey.value;
+    const isPending = key === 'pending';
+    const isEditingThread = !!editingCommentId.value && editingCommentId.value === comment?.commentId;
+    if (!isActiveThread && !isPending && !isEditingThread) return;
+
+    // Reflow nearby cards after size changes of the active/pending/editing thread.
+    // Avoid force-snapping to anchor here because it can over-shift the whole lane
+    // near viewport boundaries and make bottom clipping more frequent.
+    remeasureCommentKeys(allPositions.value.map((pos) => pos.id));
+    scheduleDeferredRemeasure(() => allPositions.value.map((pos) => pos.id));
   });
 };
 
@@ -355,6 +373,25 @@ const remeasureCommentKeys = (keys) => {
   }
 };
 
+// 50ms: after Vue nextTick + browser rAF settle the initial DOM change.
+// 350ms: after .comment-placeholder transition (300ms ease) completes.
+const REMEASURE_AFTER_DOM_SETTLE_MS = 50;
+const REMEASURE_AFTER_PLACEHOLDER_TRANSITION_MS = 350;
+
+/**
+ * Cancels any pending delayed remeasure passes, then schedules two remeasure runs.
+ * Pass an array of keys, or a getter so keys are resolved when each timeout fires
+ * (e.g. when `allPositions` may have changed).
+ */
+const scheduleDeferredRemeasure = (keysOrGetter) => {
+  clearDeferredRemeasureTimers();
+  const resolveKeys = typeof keysOrGetter === 'function' ? keysOrGetter : () => keysOrGetter;
+  remeasureTimers.push(setTimeout(() => remeasureCommentKeys(resolveKeys()), REMEASURE_AFTER_DOM_SETTLE_MS));
+  remeasureTimers.push(
+    setTimeout(() => remeasureCommentKeys(resolveKeys()), REMEASURE_AFTER_PLACEHOLDER_TRANSITION_MS),
+  );
+};
+
 const finishInstantSidebarAlignment = () => {
   clearInstantSidebarAlignment();
   requestAnimationFrame(() => {
@@ -382,16 +419,13 @@ watch(activeCommentKey, (newKey, oldKey) => {
   const hasPendingInstantAlignment =
     newKey && newKey === instantAlignmentKey.value && Number.isFinite(instantSidebarAlignmentTargetY.value);
 
-  // 50ms: after Vue nextTick + browser rAF settle the initial DOM change
-  // 350ms: after .comment-placeholder transition (300ms ease) completes
   nextTick(() => {
     if (hasPendingInstantAlignment) {
       remeasureCommentKeys(keysToRemeasure);
       return;
     }
 
-    remeasureTimers.push(setTimeout(() => remeasureCommentKeys(keysToRemeasure), 50));
-    remeasureTimers.push(setTimeout(() => remeasureCommentKeys(keysToRemeasure), 350));
+    scheduleDeferredRemeasure(keysToRemeasure);
   });
 });
 
@@ -408,8 +442,7 @@ watch(editingCommentId, () => {
   clearDeferredRemeasureTimers();
 
   nextTick(() => {
-    remeasureTimers.push(setTimeout(() => remeasureCommentKeys(allPositions.value.map((pos) => pos.id)), 50));
-    remeasureTimers.push(setTimeout(() => remeasureCommentKeys(allPositions.value.map((pos) => pos.id)), 350));
+    scheduleDeferredRemeasure(() => allPositions.value.map((pos) => pos.id));
   });
 });
 
@@ -567,7 +600,7 @@ onBeforeUnmount(() => {
     class="section-wrapper"
     ref="floatingCommentsContainer"
     :style="{
-      minHeight: totalHeight + 'px',
+      minHeight: wrapperMinHeight + 'px',
       transition: disableInstantLayoutTransitions ? 'none' : undefined,
     }"
   >

packages/superdoc/src/components/CommentsLayer/commentsList/commentsList.vue

@@ -1,8 +1,7 @@
 <script setup>
 import { storeToRefs } from 'pinia';
-import { computed, onBeforeUnmount, onMounted, reactive, getCurrentInstance } from 'vue';
+import { computed, onBeforeUnmount, onMounted } from 'vue';
 import { useCommentsStore } from '@stores/comments-store';
-import { useSuperdocStore } from '@stores/superdoc-store';
 import CommentDialog from '../CommentDialog.vue';
 
 const props = defineProps({
@@ -16,11 +15,8 @@ const props = defineProps({
   },
 });
 
-const superdocStore = useSuperdocStore();
 const commentsStore = useCommentsStore();
-const { COMMENT_EVENTS } = commentsStore;
-const { commentsList, getGroupedComments, isCommentsListVisible } = storeToRefs(commentsStore);
-const { proxy } = getCurrentInstance();
+const { getGroupedComments, isCommentsListVisible } = storeToRefs(commentsStore);
 
 const shouldShowResolvedComments = computed(() => {
   return props.showResolvedComments && getGroupedComments.value?.resolvedComments?.length > 0;
@@ -38,14 +34,14 @@ onBeforeUnmount(() => {
 <template>
   <div class="comments-list">
     <div v-if="showMainComments">
-      <div v-for="comment in getGroupedComments.parentComments" class="comment-item">
+      <div v-for="comment in getGroupedComments.parentComments" :key="comment.commentId" class="comment-item">
         <CommentDialog :comment="comment" />
       </div>
     </div>
 
     <div v-if="shouldShowResolvedComments">
       <div class="comment-title">Resolved</div>
-      <div v-for="comment in getGroupedComments.resolvedComments" class="comment-item">
+      <div v-for="comment in getGroupedComments.resolvedComments" :key="comment.commentId" class="comment-item">
         <CommentDialog :comment="comment" />
       </div>
     </div>

tests/behavior/tests/comments/sd-2464-comment-bubble-not-clipped.spec.ts

@@ -0,0 +1,63 @@
+import { test, expect } from '../../fixtures/superdoc.js';
+import { assertDocumentApiReady, listTrackChanges } from '../../helpers/document-api.js';
+
+test.use({ config: { toolbar: 'full', comments: 'on', trackChanges: true } });
+
+test('@behavior SD-2464: last comment bubble is not clipped when many tracked changes exist', async ({ superdoc }) => {
+  await assertDocumentApiReady(superdoc.page);
+
+  // Switch to suggesting mode so edits create tracked changes
+  await superdoc.setDocumentMode('suggesting');
+  await superdoc.waitForStable();
+
+  // Create 8 tracked changes on separate lines to push the last bubble low
+  for (let i = 0; i < 8; i++) {
+    await superdoc.type(`tracked change ${i + 1}`);
+    await superdoc.newLine();
+    await superdoc.waitForStable();
+  }
+
+  // Verify tracked changes were created
+  await expect
+    .poll(async () => (await listTrackChanges(superdoc.page, { type: 'insert' })).total)
+    .toBeGreaterThanOrEqual(8);
+
+  // Wait for floating comment placeholders to render
+  const placeholders = superdoc.page.locator('.comment-placeholder');
+  await expect(placeholders.first()).toBeAttached({ timeout: 10_000 });
+
+  // Click the last bubble to activate it (triggers sidebar alignment)
+  const lastDialog = placeholders.last().locator('.comments-dialog');
+  await expect(lastDialog).toBeAttached({ timeout: 10_000 });
+  await lastDialog.click({ position: { x: 12, y: 12 } });
+  await superdoc.waitForStable();
+
+  // Wait for the alignment timer (400ms) + transition (300ms) + buffer
+  await superdoc.page.waitForTimeout(1000);
+
+  // The active dialog should be fully visible — not clipped by the parent container.
+  // Get the bounding rects of the active dialog and the .floating-comments container.
+  const clipping = await superdoc.page.evaluate(() => {
+    const activeDialog = document.querySelector('.comments-dialog.is-active');
+    const floatingComments = document.querySelector('.floating-comments');
+    if (!activeDialog || !floatingComments) return null;
+
+    const dRect = activeDialog.getBoundingClientRect();
+    const fRect = floatingComments.getBoundingClientRect();
+
+    return {
+      dialogBottom: dRect.bottom,
+      containerBottom: fRect.bottom,
+      containerOverflow: getComputedStyle(floatingComments).overflow,
+    };
+  });
+
+  expect(clipping).not.toBeNull();
+
+  // The container should use overflow: visible (not hidden) so bubbles are never clipped
+  expect(clipping!.containerOverflow).toBe('visible');
+
+  // The dialog should either fit within the container OR overflow is visible so it's still shown
+  // With overflow: visible, even if dialogBottom > containerBottom the content is still visible
+  // This test primarily guards against regression to overflow: hidden
+});

tests/behavior/tests/formatting/linked-style-partial-selection.spec.ts

@@ -129,10 +129,15 @@ test.describe('SD-2425 linked style partial selection', () => {
     await applyLinkedStyleToSelection(superdoc.page, 'Heading1');
     await superdoc.waitForStable();
 
-    // Move cursor to end and press Enter
-    await superdoc.press('End');
+    // Place a collapsed cursor at paragraph end via document positions.
+    // Using key events (End) can be flaky in CI depending on focus timing.
+    const worldPos = await superdoc.findTextPos('world');
+    const paragraphEnd = worldPos + 'world'.length;
+    await superdoc.setTextSelection(paragraphEnd, paragraphEnd);
     await superdoc.waitForStable();
+
     await superdoc.newLine();
+    await superdoc.waitForStable();
     await superdoc.type('new text');
     await superdoc.waitForStable();