diff --git a/package-lock.json b/package-lock.json index f391bb6a2e..2b46dac60b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@coralproject/talk", - "version": "6.15.0", + "version": "6.15.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 28f5725ac9..82e3b7e80e 100644 --- a/package.json +++ b/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": [ diff --git a/src/core/client/stream/tabs/Comments/Comment/InReplyTo.css b/src/core/client/stream/tabs/Comments/Comment/InReplyTo.css index 0c5002dba1..d985c6e2b6 100644 --- a/src/core/client/stream/tabs/Comments/Comment/InReplyTo.css +++ b/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; } diff --git a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx index 4921c00b7e..cdbec6ea06 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx +++ b/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) => { - 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) => { 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;