fix: Formatting toolbar clipped on first comment in sidebar, closes #…

…6841
outline · Apr 25, 2024 · bf848f3 · bf848f3
1 parent cffd0be
commit bf848f3
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git a/app/components/Scrollable.tsx b/app/components/Scrollable.tsx
@@ -10,11 +10,20 @@ type Props = React.HTMLAttributes<HTMLDivElement> & {
   bottomShadow?: boolean;
   hiddenScrollbars?: boolean;
   flex?: boolean;
+  overflow?: string;
   children: React.ReactNode;
 };
 
 function Scrollable(
-  { shadow, topShadow, bottomShadow, hiddenScrollbars, flex, ...rest }: Props,
+  {
+    shadow,
+    topShadow,
+    bottomShadow,
+    hiddenScrollbars,
+    flex,
+    overflow,
+    ...rest
+  }: Props,
   ref: React.RefObject<HTMLDivElement>
 ) {
   const fallbackRef = React.useRef<HTMLDivElement>();
@@ -60,6 +69,7 @@ function Scrollable(
       $hiddenScrollbars={hiddenScrollbars}
       $topShadowVisible={topShadowVisible}
       $bottomShadowVisible={bottomShadowVisible}
+      $overflow={overflow}
       {...rest}
     />
   );
@@ -70,12 +80,13 @@ const Wrapper = styled.div<{
   $topShadowVisible?: boolean;
   $bottomShadowVisible?: boolean;
   $hiddenScrollbars?: boolean;
+  $overflow?: string;
 }>`
   display: ${(props) => (props.$flex ? "flex" : "block")};
   flex-direction: column;
   height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow-y: ${(props) => (props.$overflow ? props.$overflow : "auto")};
+  overflow-x: ${(props) => (props.$overflow ? props.$overflow : "hidden")};
   overscroll-behavior: none;
   -webkit-overflow-scrolling: touch;
   box-shadow: ${(props) => {

diff --git a/app/scenes/Document/components/Comments.tsx b/app/scenes/Document/components/Comments.tsx
@@ -42,6 +42,7 @@ function Comments() {
     .threadsInDocument(document.id)
     .filter((thread) => !thread.isNew || thread.createdById === user.id);
   const hasComments = threads.length > 0;
+  const hasMultipleComments = comments.inDocument(document.id).length > 1;
 
   return (
     <Sidebar
@@ -50,8 +51,9 @@ function Comments() {
       scrollable={false}
     >
       <Scrollable
-        bottomShadow={!focusedComment}
         id="comments"
+        overflow={hasMultipleComments ? undefined : "initial"}
+        bottomShadow={!focusedComment}
         hiddenScrollbars
         topShadow
       >

diff --git a/app/stores/CommentsStore.ts b/app/stores/CommentsStore.ts
@@ -9,6 +9,16 @@ export default class CommentsStore extends Store<Comment> {
     super(rootStore, Comment);
   }
 
+  /**
+   * Returns a list of comments in a document.
+   *
+   * @param documentId ID of the document to get comments for
+   * @returns Array of comments
+   */
+  inDocument(documentId: string): Comment[] {
+    return this.filter((comment: Comment) => comment.documentId === documentId);
+  }
+
   /**
    * Returns a list of comments in a document that are not replies to other
    * comments.