Keep comment popovers anchored

Author: chaoxiaoche

apps/web/src/components/BoardComposerPopover.tsx

@@ -174,6 +174,7 @@ export function BoardComposerPopover({
   bounds,
   offset,
   docked = false,
+  targetVisible = true,
 }: {
   target: PreviewCommentSnapshot;
   existing: PreviewComment | null;
@@ -194,13 +195,14 @@ export function BoardComposerPopover({
   bounds?: PopoverBounds;
   offset?: PopoverOffset;
   docked?: boolean;
+  targetVisible?: boolean;
 }) {
   const pendingCount = notes.length + (draft.trim() ? 1 : 0);
   const hasCommentChange = !existing || draft.trim() !== existing.note.trim();
   const podMembers = target.podMembers ?? [];
   return (
     <div
-      className={`comment-popover${docked ? ' comment-popover-docked' : ''}`}
+      className={`comment-popover${docked ? ' comment-popover-docked' : ''}${targetVisible ? '' : ' is-target-offscreen'}`}
       data-testid="comment-popover"
       role="dialog"
       aria-modal="false"

apps/web/src/components/FileViewer.tsx

@@ -1994,6 +1994,23 @@ function commentActivityAt(comment: PreviewComment): number {
   );
 }
 
+function commentTargetIntersectsPreview(
+  target: PreviewCommentSnapshot | null,
+  scale: number,
+  offset: { x: number; y: number },
+  bounds?: PreviewCanvasSize,
+): boolean {
+  if (!target || !bounds?.width || !bounds.height) return true;
+  const rect = overlayBoundsFromSnapshot(target, scale, offset);
+  const margin = 8;
+  return (
+    rect.left + rect.width > margin &&
+    rect.top + rect.height > margin &&
+    rect.left < bounds.width - margin &&
+    rect.top < bounds.height - margin
+  );
+}
+
 function commentDisplayLabel(comment: PreviewComment, t: TranslateFn): string {
   if (comment.elementId.startsWith('pin-')) return t('chat.comments.pin');
   const label = String(comment.label || '').trim().toLowerCase();
@@ -4956,7 +4973,7 @@ const [manualEditTargets, setManualEditTargets] = useState<ManualEditTarget[]>([
           current
             ? current.selectionKind === 'pod'
               ? current
-              : next.get(current.elementId) ?? null
+              : next.get(current.elementId) ?? current
             : null
         ));
         setHoveredCommentTarget((current) => (
@@ -6017,6 +6034,16 @@ const [manualEditTargets, setManualEditTargets] = useState<ManualEditTarget[]>([
     void exitManualEditModeAfterFlush();
   }
 
+  function returnToActiveCommentTarget() {
+    if (!activeCommentTarget) return;
+    iframeRef.current?.contentWindow?.postMessage({
+      type: 'od:comment-scroll-to-target',
+      elementId: activeCommentTarget.elementId,
+      selector: activeCommentTarget.selector,
+    }, '*');
+    setHoveredCommentTarget(activeCommentTarget);
+  }
+
   function queueCurrentDraft() {
     const note = commentDraft.trim();
     if (!note) return;
@@ -6129,6 +6156,16 @@ const [manualEditTargets, setManualEditTargets] = useState<ManualEditTarget[]>([
       ? visibleSideComments.find((comment) => comment.elementId === activeCommentTarget.elementId)?.id ?? null
       : null
   );
+  const activeCommentTargetVisible = commentTargetIntersectsPreview(
+    activeCommentTarget,
+    overlayPreviewScale,
+    { x: overlayPreviewTransform.offsetX, y: overlayPreviewTransform.offsetY },
+    previewBodySize,
+  );
+  const hoveredTargetHasSavedComment = Boolean(
+    hoveredCommentTarget &&
+    visibleSideComments.some((comment) => comment.elementId === hoveredCommentTarget.elementId),
+  );
   useEffect(() => {
     if (!boardMode || !activePreviewCommentId) return;
     const stillOpen = visibleSideComments.some((comment) => comment.id === activePreviewCommentId);
@@ -6332,6 +6369,7 @@ const [manualEditTargets, setManualEditTargets] = useState<ManualEditTarget[]>([
       offset={{ x: overlayPreviewTransform.offsetX, y: overlayPreviewTransform.offsetY }}
       bounds={previewBodySize}
       docked={false}
+      targetVisible={activeCommentTargetVisible}
     />
   ) : null;
   const commentSidePanel = commentPanelOpen ? (
@@ -7023,7 +7061,18 @@ const [manualEditTargets, setManualEditTargets] = useState<ManualEditTarget[]>([
               </div>
             ) : null}
             {commentComposer}
-            {boardMode && !commentCreateMode && hoveredCommentTarget && (!activeCommentTarget || commentPortalHost) ? (
+            {boardMode && activeCommentTarget && !activeCommentTargetVisible ? (
+              <button
+                type="button"
+                className="comment-return-anchor"
+                data-testid="comment-return-anchor"
+                onClick={returnToActiveCommentTarget}
+              >
+                <span aria-hidden="true">📍</span>
+                <span>Return to element</span>
+              </button>
+            ) : null}
+            {boardMode && !commentCreateMode && hoveredCommentTarget && !hoveredTargetHasSavedComment && (!activeCommentTarget || commentPortalHost) ? (
               <AnnotationHoverPopover
                 target={hoveredCommentTarget}
                 scale={overlayPreviewScale}

apps/web/src/runtime/srcdoc.ts

@@ -1127,6 +1127,24 @@ function meaningfulDomFallbackTarget(el) {
   function requestPreviewScrollRestore(){
     window.parent.postMessage({ type: 'od:preview-scroll-request' }, '*');
   }
+  function scrollCommentTargetIntoView(data){
+    var el = null;
+    if (data.selector) {
+      try { el = document.querySelector(String(data.selector)); } catch (_) { el = null; }
+    }
+    if (!el && data.elementId) {
+      try {
+        var id = String(data.elementId).replace(/"/g, '\\"');
+        el = document.querySelector('[data-od-id="' + id + '"], [data-screen-label="' + id + '"]');
+      } catch (_) { el = null; }
+    }
+    if (!el || typeof el.scrollIntoView !== 'function') return;
+    el.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' });
+    window.setTimeout(function(){
+      schedulePostTargets();
+      schedulePostPreviewScroll();
+    }, 120);
+  }
   function postTargets(){
     if (!active()) return;
     window.parent.postMessage({ type: 'od:comment-targets', targets: allTargets() }, '*');
@@ -1217,6 +1235,10 @@ function meaningfulDomFallbackTarget(el) {
       setTimeout(postPreviewScroll, 0);
       return;
     }
+    if (data.type === 'od:comment-scroll-to-target') {
+      scrollCommentTargetIntoView(data);
+      return;
+    }
     if (data.type === 'od:inspect-mode') {
       inspectEnabled = !!data.enabled;
       document.documentElement.toggleAttribute('data-od-inspect-mode', inspectEnabled);

apps/web/src/styles/viewer/core.css

@@ -1127,6 +1127,31 @@
   background: var(--bg-panel);
   box-shadow: var(--shadow-lg);
 }
+.comment-popover.is-target-offscreen {
+  opacity: 0.42;
+}
+.comment-return-anchor {
+  position: absolute;
+  left: 50%;
+  bottom: 16px;
+  z-index: 45;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  transform: translateX(-50%);
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-pill);
+  background: var(--bg-panel);
+  color: var(--text);
+  box-shadow: var(--shadow-lg);
+  font-size: 13px;
+  font-weight: 650;
+}
+.comment-return-anchor:hover {
+  border-color: var(--accent-soft);
+  color: var(--accent-strong);
+}
 .annotation-hover-popover {
   pointer-events: none;
 }