fix: Various fixes for commenting on mobile (#5195

* fix: Comment sidebar chopped on mobile
fix: Zoom on comment input focus on mobile

* fix: Always show reply option on mobile

* fix: Auto-expand comment sidebar if linked to a specific comment

app/scenes/Document/components/Editor.tsx

@@ -70,6 +70,12 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
     }
   }, [ref]);
 
+  React.useEffect(() => {
+    if (focusedComment) {
+      ui.expandComments(document.id);
+    }
+  }, [focusedComment, ui, document.id]);
+
   // Save document when blurring title, but delay so that if clicking on a
   // button this is allowed to execute first.
   const handleBlur = React.useCallback(() => {
@@ -91,13 +97,12 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
 
   const handleClickComment = React.useCallback(
     (commentId: string) => {
-      ui.expandComments(document.id);
       history.replace({
         pathname: window.location.pathname.replace(/\/history$/, ""),
         state: { commentId },
       });
     },
-    [ui, document.id, history]
+    [history]
   );
 
   // Create a Comment model in local store when a comment mark is created, this
@@ -119,13 +124,12 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
       comment.id = commentId;
       comments.add(comment);
 
-      ui.expandComments(document.id);
       history.replace({
         pathname: window.location.pathname.replace(/\/history$/, ""),
         state: { commentId },
       });
     },
-    [comments, user?.id, props.id, ui, document.id, history]
+    [comments, user?.id, props.id, history]
   );
 
   // Soft delete the Comment model when associated mark is totally removed.