Set comment position correctly relative to scroll position (#8511)

Fixes #8500. As a consequence of the CSS changes in c6fdb6bbb3, scroll position is no longer reflected in the document element's scrollTop property, but on the `<main>` element instead. As a result, comment positions were not being adjusted for scroll position. To account for this (and any future CSS changes), we walk all ancestor elements to calculate the true scroll position.

client/src/components/CommentApp/utils/layout.ts

@@ -51,15 +51,20 @@ export class LayoutController {
       return;
     }
 
-    const currentNodeTop = annotation
-      .getAnchorNode(commentId === this.pinnedComment)
-      .getBoundingClientRect().top;
+    const currentNode = annotation.getAnchorNode(
+      commentId === this.pinnedComment,
+    );
+    let currentNodeTop = currentNode.getBoundingClientRect().top;
+    // adjust currentNodeTop for scroll positions of all ancestor elements
+    let parent = currentNode.parentElement;
+    while (parent) {
+      currentNodeTop += parent.scrollTop;
+      parent = parent.parentElement;
+    }
 
     this.commentDesiredPositions.set(
       commentId,
-      currentNodeTop !== 0
-        ? currentNodeTop + document.documentElement.scrollTop + OFFSET
-        : 0,
+      currentNodeTop !== 0 ? currentNodeTop + OFFSET : 0,
     );
   }