Merge pull request #3707 from coralproject/develop

Release v6.15.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coralproject/talk",
-  "version": "6.15.0",
+  "version": "6.15.1",
   "author": "The Coral Project",
   "homepage": "https://coralproject.net/",
   "sideEffects": [

src/core/client/stream/tabs/Comments/Comment/InReplyTo.css

@@ -11,7 +11,6 @@ $commentsInReplyToIconColor: var(--palette-text-100);
   font-weight: var(--font-weight-secondary-bold);
   font-size: var(--font-size-3);
   line-height: 1;
-
   color: $commentsInReplyToUsernameColor;
 }
 
@@ -26,4 +25,5 @@ $commentsInReplyToIconColor: var(--palette-text-100);
 
 .button {
   display: block;
+  vertical-align: baseline;
 }

src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx

@@ -31,6 +31,7 @@ import { ReplyCommentFormContainer_comment as CommentData } from "coral-stream/_
 import { ReplyCommentFormContainer_settings as SettingsData } from "coral-stream/__generated__/ReplyCommentFormContainer_settings.graphql";
 import { ReplyCommentFormContainer_story as StoryData } from "coral-stream/__generated__/ReplyCommentFormContainer_story.graphql";
 
+import { useCommentSeenEnabled } from "../../commentSeen";
 import {
   shouldTriggerSettingsRefresh,
   shouldTriggerViewerRefresh,
@@ -63,7 +64,8 @@ interface Props {
 }
 
 const ReplyCommentFormContainer: FunctionComponent<Props> = (props) => {
-  const { pym } = useCoralContext();
+  const { pym, renderWindow } = useCoralContext();
+  const commentSeenEnabled = useCommentSeenEnabled();
 
   const [nudge, setNudge] = useState(true);
   const [initialized, setInitialized] = useState(false);
@@ -222,9 +224,18 @@ const ReplyCommentFormContainer: FunctionComponent<Props> = (props) => {
 
     const elementID = computeCommentElementID(commentID);
     setTimeout(() => {
-      pym.scrollParentToChildEl(elementID);
+      const elem = renderWindow.document.getElementById(elementID);
+      if (elem) {
+        const offset =
+          // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+          elem.getBoundingClientRect().top +
+          renderWindow.pageYOffset -
+          (commentSeenEnabled ? 150 : 0);
+        pym.scrollParentToChildPos(offset);
+        elem.focus();
+      }
     }, 300);
-  }, [jumpToCommentID, props, pym]);
+  }, [commentSeenEnabled, jumpToCommentID, props, pym, renderWindow]);
 
   if (!initialized) {
     return null;