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

@@ -69,7 +69,7 @@ function Right({ children, border, className }: Props) {
   const style = React.useMemo(
     () =>
       isMobile
-        ? { width: "80%" }
+        ? { width: "80vw" }
         : {
             width: `${ui.sidebarRightWidth}px`,
           },
@@ -112,9 +112,10 @@ function Right({ children, border, className }: Props) {
 }
 
 const Position = styled(Flex)`
-  position: fixed;
+  position: absolute;
   top: 0;
   bottom: 0;
+  left: 0;
 `;
 
 const Sidebar = styled(m.div)<{
@@ -123,17 +124,16 @@ const Sidebar = styled(m.div)<{
   display: flex;
   flex-shrink: 0;
   background: ${s("background")};
-  max-width: 80%;
+  max-width: 80vw;
   border-left: 1px solid ${s("divider")};
   transition: border-left 100ms ease-in-out;
-  z-index: 1;
+  z-index: ${depths.sidebar};
 
   ${breakpoint("mobile", "tablet")`
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
-    z-index: ${depths.sidebar};
   `}
 
   ${breakpoint("tablet")`

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>
   );
 }

shared/i18n/locales/en_US/translation.json

@@ -452,12 +452,12 @@
   "Error updating comment": "Error updating comment",
   "edited": "edited",
   "Images are still uploading.\nAre you sure you want to discard them?": "Images are still uploading.\nAre you sure you want to discard them?",
+  "{{ count }} comment": "{{ count }} comment",
+  "{{ count }} comment_plural": "{{ count }} comments",
   "Viewed by": "Viewed by",
   "only you": "only you",
   "person": "person",
   "people": "people",
-  "{{ count }} comment": "{{ count }} comment",
-  "{{ count }} comment_plural": "{{ count }} comments",
   "Type '/' to insert, or start writing…": "Type '/' to insert, or start writing…",
   "Hide contents": "Hide contents",
   "Show contents": "Show contents",