Various sidebar fixes (#5278

* fix: Right sidebar depth
Re-arrange order of document metadata

* fix: Comment reply not focused on 'Reply…' tap

* fix: Sidebar animation oddities on mobile/Safari

app/scenes/Document/components/CommentForm.tsx

@@ -40,8 +40,6 @@ type Props = {
   onFocus?: () => void;
   /** Callback when the editor is blurred */
   onBlur?: () => void;
-  /** Callback when the editor is clicked outside of */
-  onClickOutside?: (event: MouseEvent | TouchEvent) => void;
 };
 
 function CommentForm({
@@ -50,7 +48,6 @@ function CommentForm({
   onTyping,
   onFocus,
   onBlur,
-  onClickOutside,
   autoFocus,
   standalone,
   placeholder,

app/scenes/Document/components/CommentThread.tsx

@@ -143,7 +143,7 @@ function CommentThread({
       $focused={focused}
       $recessed={recessed}
       $dir={document.dir}
-      onClick={handleClickThread}
+      onPointerUp={handleClickThread}
     >
       {commentsInThread.map((comment, index) => {
         const firstOfAuthor =
@@ -192,7 +192,7 @@ function CommentThread({
         )}
       </ResizingHeightContainer>
       {!focused && !recessed && can.comment && (
-        <Reply onClick={() => setAutoFocus(true)}>{t("Reply")}…</Reply>
+        <Reply onPointerDown={() => setAutoFocus(true)}>{t("Reply")}…</Reply>
       )}
     </Thread>
   );

app/scenes/Document/components/DocumentMeta.tsx

@@ -37,6 +37,20 @@ function TitleDocumentMeta({ to, isDraft, document, ...rest }: Props) {
 
   return (
     <Meta document={document} to={to} replace {...rest}>
+      {team?.getPreference(TeamPreference.Commenting) && (
+        <>
+          &nbsp;•&nbsp;
+          <CommentLink
+            to={documentPath(document)}
+            onClick={() => ui.toggleComments(document.id)}
+          >
+            <CommentIcon size={18} />
+            {commentsCount
+              ? t("{{ count }} comment", { count: commentsCount })
+              : t("Comment")}
+          </CommentLink>
+        </>
+      )}
       {totalViewers && !isDraft ? (
         <Wrapper>
           &nbsp;•&nbsp;
@@ -54,20 +68,6 @@ function TitleDocumentMeta({ to, isDraft, document, ...rest }: Props) {
           </Link>
         </Wrapper>
       ) : null}
-      {team?.getPreference(TeamPreference.Commenting) && (
-        <>
-          &nbsp;•&nbsp;
-          <CommentLink
-            to={documentPath(document)}
-            onClick={() => ui.toggleComments(document.id)}
-          >
-            <CommentIcon size={18} />
-            {commentsCount
-              ? t("{{ count }} comment", { count: commentsCount })
-              : t("Comment")}
-          </CommentLink>
-        </>
-      )}
     </Meta>
   );
 }