fix: Improve scrolling behavior

closes #7533

app/components/ResizingHeightContainer.tsx

@@ -1,5 +1,6 @@
 import { m, TargetAndTransition } from "framer-motion";
 import * as React from "react";
+import { mergeRefs } from "react-merge-refs";
 import useComponentSize from "~/hooks/useComponentSize";
 
 type Props = {
@@ -18,35 +19,37 @@ type Props = {
 /**
  * Automatically animates the height of a container based on it's contents.
  */
-export function ResizingHeightContainer(props: Props) {
-  const {
-    hideOverflow,
-    children,
-    config = {
-      transition: {
-        duration: 0.1,
-        ease: "easeInOut",
+export const ResizingHeightContainer = React.forwardRef<HTMLDivElement, Props>(
+  function ResizingHeightContainer_(props, forwardedRef) {
+    const {
+      hideOverflow,
+      children,
+      config = {
+        transition: {
+          duration: 0.1,
+          ease: "easeInOut",
+        },
       },
-    },
-    style,
-  } = props;
+      style,
+    } = props;
 
-  const ref = React.useRef<HTMLDivElement>(null);
-  const { height } = useComponentSize(ref);
+    const ref = React.useRef<HTMLDivElement>(null);
+    const { height } = useComponentSize(ref);
 
-  return (
-    <m.div
-      animate={{
-        ...config,
-        height: Math.round(height),
-      }}
-      style={{
-        ...style,
-        overflow: hideOverflow ? "hidden" : "inherit",
-        position: "relative",
-      }}
-    >
-      <div ref={ref}>{children}</div>
-    </m.div>
-  );
-}
+    return (
+      <m.div
+        animate={{
+          ...config,
+          height: Math.round(height),
+        }}
+        style={{
+          ...style,
+          overflow: hideOverflow ? "hidden" : "inherit",
+          position: "relative",
+        }}
+      >
+        <div ref={mergeRefs([ref, forwardedRef])}>{children}</div>
+      </m.div>
+    );
+  }
+);

app/scenes/Document/components/CommentThread.tsx

@@ -67,6 +67,7 @@ function CommentThread({
   const { editor } = useDocumentContext();
   const { comments } = useStores();
   const topRef = React.useRef<HTMLDivElement>(null);
+  const replyRef = React.useRef<HTMLDivElement>(null);
   const user = useCurrentUser();
   const { t } = useTranslation();
   const history = useHistory();
@@ -123,13 +124,13 @@ function CommentThread({
 
       setTimeout(
         () => {
-          if (!topRef.current) {
+          if (!replyRef.current) {
             return;
           }
-          return scrollIntoView(topRef.current, {
+          return scrollIntoView(replyRef.current, {
             scrollMode: "if-needed",
             behavior: "smooth",
-            block: "end",
+            block: "center",
             boundary: (parent) =>
               // Prevents body and other parent elements from being scrolled
               parent.id !== "comments",
@@ -202,7 +203,7 @@ function CommentThread({
           </Flex>
         ))}
 
-      <ResizingHeightContainer hideOverflow={false}>
+      <ResizingHeightContainer hideOverflow={false} ref={replyRef}>
         {(focused || draft || commentsInThread.length === 0) && can.comment && (
           <Fade timing={100}>
             <CommentForm