diff --git a/app/components/AuthenticatedLayout.tsx b/app/components/AuthenticatedLayout.tsx
index 5cd459dcac..c4898c6321 100644
--- a/app/components/AuthenticatedLayout.tsx
+++ b/app/components/AuthenticatedLayout.tsx
@@ -32,7 +32,7 @@ import { PortalContext } from "./Portal";
 import CommandBar from "./CommandBar";
 
 const DocumentComments = lazyWithRetry(
-  () => import("~/scenes/Document/components/Comments")
+  () => import("~/scenes/Document/components/Comments/Comments")
 );
 const DocumentHistory = lazyWithRetry(
   () => import("~/scenes/Document/components/History")
diff --git a/app/components/Notifications/NotificationListItem.tsx b/app/components/Notifications/NotificationListItem.tsx
index 2641436d73..2c2b98521d 100644
--- a/app/components/Notifications/NotificationListItem.tsx
+++ b/app/components/Notifications/NotificationListItem.tsx
@@ -15,7 +15,7 @@ import { UnreadBadge } from "../UnreadBadge";
 import lazyWithRetry from "~/utils/lazyWithRetry";
 
 const CommentEditor = lazyWithRetry(
-  () => import("~/scenes/Document/components/CommentEditor")
+  () => import("~/scenes/Document/components/Comments/CommentEditor")
 );
 
 type Props = {
diff --git a/app/scenes/Document/components/CommentEditor.tsx b/app/scenes/Document/components/Comments/CommentEditor.tsx
similarity index 100%
rename from app/scenes/Document/components/CommentEditor.tsx
rename to app/scenes/Document/components/Comments/CommentEditor.tsx
diff --git a/app/scenes/Document/components/CommentForm.tsx b/app/scenes/Document/components/Comments/CommentForm.tsx
similarity index 97%
rename from app/scenes/Document/components/CommentForm.tsx
rename to app/scenes/Document/components/Comments/CommentForm.tsx
index 6b4bde99b3..907e041861 100644
--- a/app/scenes/Document/components/CommentForm.tsx
+++ b/app/scenes/Document/components/Comments/CommentForm.tsx
@@ -25,6 +25,7 @@ import useStores from "~/hooks/useStores";
 import { Bubble } from "./CommentThreadItem";
 import { HighlightedText } from "./HighlightText";
 import lazyWithRetry from "~/utils/lazyWithRetry";
+import { mergeRefs } from "react-merge-refs";
 
 const CommentEditor = lazyWithRetry(() => import("./CommentEditor"));
 
@@ -247,15 +248,15 @@ function CommentForm({
     }
   };
 
-  // Focus the editor when it's a new comment just mounted, after a delay as the
-  // editor is mounted within a fade transition.
-  React.useEffect(() => {
-    setTimeout(() => {
+  // Focus the editor when it's a new comment just mounted
+  const handleMounted = React.useCallback(
+    (ref) => {
       if (autoFocus) {
-        editorRef.current?.focusAtStart();
+        ref?.focusAtStart();
       }
-    }, 0);
-  }, [autoFocus]);
+    },
+    [autoFocus]
+  );
 
   const presence = animatePresence
     ? {
@@ -310,7 +311,7 @@ function CommentForm({
           )}
           <CommentEditor
             key={`${forceRender}`}
-            ref={editorRef}
+            ref={mergeRefs([editorRef, handleMounted])}
             defaultValue={draft}
             onChange={handleChange}
             onSave={handleSave}
diff --git a/app/scenes/Document/components/CommentSortMenu.tsx b/app/scenes/Document/components/Comments/CommentSortMenu.tsx
similarity index 100%
rename from app/scenes/Document/components/CommentSortMenu.tsx
rename to app/scenes/Document/components/Comments/CommentSortMenu.tsx
diff --git a/app/scenes/Document/components/CommentThread.tsx b/app/scenes/Document/components/Comments/CommentThread.tsx
similarity index 100%
rename from app/scenes/Document/components/CommentThread.tsx
rename to app/scenes/Document/components/Comments/CommentThread.tsx
diff --git a/app/scenes/Document/components/CommentThreadItem.tsx b/app/scenes/Document/components/Comments/CommentThreadItem.tsx
similarity index 100%
rename from app/scenes/Document/components/CommentThreadItem.tsx
rename to app/scenes/Document/components/Comments/CommentThreadItem.tsx
diff --git a/app/scenes/Document/components/Comments.tsx b/app/scenes/Document/components/Comments/Comments.tsx
similarity index 99%
rename from app/scenes/Document/components/Comments.tsx
rename to app/scenes/Document/components/Comments/Comments.tsx
index 4e064536a5..765c0dc4b7 100644
--- a/app/scenes/Document/components/Comments.tsx
+++ b/app/scenes/Document/components/Comments/Comments.tsx
@@ -11,6 +11,7 @@ import Empty from "~/components/Empty";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
+import { ArrowDownIcon } from "~/components/Icons/ArrowIcon";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import { useFocusedComment } from "~/hooks/useFocusedComment";
 import useKeyDown from "~/hooks/useKeyDown";
@@ -22,9 +23,8 @@ import { CommentSortOption, CommentSortType } from "~/types";
 import CommentForm from "./CommentForm";
 import CommentSortMenu from "./CommentSortMenu";
 import CommentThread from "./CommentThread";
-import Sidebar from "./SidebarLayout";
+import Sidebar from "../SidebarLayout";
 import useMobile from "~/hooks/useMobile";
-import { ArrowDownIcon } from "~/components/Icons/ArrowIcon";
 
 function Comments() {
   const { ui, comments, documents } = useStores();
diff --git a/app/scenes/Document/components/HighlightText.ts b/app/scenes/Document/components/Comments/HighlightText.ts
similarity index 100%
rename from app/scenes/Document/components/HighlightText.ts
rename to app/scenes/Document/components/Comments/HighlightText.ts