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/CommentThread.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import styled, { css } from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
 import Comment from "~/models/Comment";
 import Document from "~/models/Document";
@@ -206,13 +207,16 @@ const Reply = styled.button`
   font-size: 14px;
   -webkit-appearance: none;
   cursor: var(--pointer);
-  opacity: 0;
   transition: opacity 100ms ease-out;
   position: absolute;
   text-align: left;
   width: 100%;
   bottom: -30px;
   left: 32px;
+
+  ${breakpoint("tablet")`
+    opacity: 0;
+  `}
 `;
 
 const Thread = styled.div<{

app/scenes/Document/components/CommentThreadItem.tsx

@@ -5,6 +5,7 @@ import { darken } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
 import { Minute } from "@shared/utils/time";
 import Comment from "~/models/Comment";
@@ -257,7 +258,7 @@ export const Bubble = styled(Flex)<{
 }>`
   position: relative;
   flex-grow: 1;
-  font-size: 15px;
+  font-size: 16px;
   color: ${s("text")};
   background: ${s("commentBackground")};
   min-width: 2em;
@@ -286,6 +287,10 @@ export const Bubble = styled(Flex)<{
   &:hover ${Menu} {
     opacity: 1;
   }
+
+  ${breakpoint("tablet")`
+    font-size: 15px;
+  `}
 `;
 
 export default observer(CommentThreadItem);

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.