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/components/Sidebar/Right.tsx

@@ -67,33 +67,36 @@ function Right({ children, border, className }: Props) {
   }, [isResizing, handleDrag, handleStopDrag]);
 
   const style = React.useMemo(
-    () => ({
-      width: `${ui.sidebarRightWidth}px`,
-    }),
-    [ui.sidebarRightWidth]
+    () =>
+      isMobile
+        ? { width: "80%" }
+        : {
+            width: `${ui.sidebarRightWidth}px`,
+          },
+    [isMobile, ui.sidebarRightWidth]
   );
 
+  const animationProps = {
+    initial: {
+      width: 0,
+    },
+    animate: {
+      transition: isResizing
+        ? { duration: 0 }
+        : {
+            type: "spring",
+            bounce: 0.2,
+            duration: sidebarAppearDuration / 1000,
+          },
+      width: ui.sidebarRightWidth,
+    },
+    exit: {
+      width: 0,
+    },
+  };
+
   return (
-    <Sidebar
-      initial={{
-        width: 0,
-      }}
-      animate={{
-        transition: isResizing
-          ? { duration: 0 }
-          : {
-              type: "spring",
-              bounce: 0.2,
-              duration: sidebarAppearDuration / 1000,
-            },
-        width: ui.sidebarRightWidth,
-      }}
-      exit={{
-        width: 0,
-      }}
-      $border={border}
-      className={className}
-    >
+    <Sidebar {...animationProps} $border={border} className={className}>
       <Position style={style} column>
         <ErrorBoundary>{children}</ErrorBoundary>
         {!isMobile && (
@@ -120,7 +123,7 @@ const Sidebar = styled(m.div)<{
   display: flex;
   flex-shrink: 0;
   background: ${s("background")};
-  max-width: 70%;
+  max-width: 80%;
   border-left: 1px solid ${s("divider")};
   transition: border-left 100ms ease-in-out;
   z-index: 1;

app/components/Sidebar/Sidebar.tsx

@@ -248,7 +248,7 @@ const Container = styled(Flex)<ContainerProps>`
     ${(props) => (props.$mobileSidebarVisible ? 0 : "-100%")}
   );
   z-index: ${depths.sidebar};
-  max-width: 70%;
+  max-width: 80%;
   min-width: 280px;
   padding-top: ${Desktop.hasInsetTitlebar() ? 36 : 0}px;
   ${draggableOnDesktop()}

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.