fix: update initial state of CommentThreads to collapsed and refine styles for better visibility

app/src/components/ui/collaboration/CommentThreads.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
 
 const CommentThreads: React.FC = () => {
-  const [expand, setExpand] = useState(true);
+  const [expand, setExpand] = useState(false);
   const commentsedUsers = [
     {
       userId: "1",

app/src/styles/main.scss

@@ -45,4 +45,4 @@
 
 //
 @use "./scene/scene";
-@use "./scene/comments";
+@use "./scene/comments";

app/src/styles/scene/comments.scss

@@ -7,19 +7,21 @@
   left: 50%;
   padding: 4px;
   background: var(--background-color);
-  border-radius: #{$border-radius-large} #{$border-radius-large} #{$border-radius-large}
+  border-radius: #{$border-radius-large} #{$border-radius-large} #{$border-radius-large} 0;
-    0;
   backdrop-filter: blur(12px);
   z-index: 1000;
   transform: translateY(-100%);
   outline: 1px solid var(--border-color);
   transition: all 0.2s ease-out;
+
   .comments-threads-container {
     display: flex;
     align-items: start;
     flex-direction: column;
+
     .users-commented {
       @include flex-center;
+
       .users {
         height: 24px;
         line-height: 24px;
@@ -28,35 +30,49 @@
         border-radius: 50%;
       }
     }
+
     .last-comment-details {
       display: flex;
       align-items: start;
       flex-direction: column;
-      padding-top: 0;
+      // padding-top: 0;
-      height: 0;
+      // height: 0;
-      width: 0;
+      // width: 0;
       overflow: hidden;
       transition: all 0.2s;
+
       .header {
         @include flex-center;
         gap: 10px;
+
         .user-name {
           text-transform: capitalize;
         }
+
         .time {
           font-size: var(--font-size-small);
           color: var(--input-text-color);
         }
       }
+
       .message {
         margin-top: 10px;
       }
+
       .replies {
         margin-top: 10px;
         font-size: var(--font-size-small);
         color: var(--input-text-color);
       }
+
+      .header,
+      .message,
+      .replies {
+        opacity: 0;
+        display: none;
+      }
     }
+
     .expand {
       min-width: 200px;
       max-width: 260px;
@@ -64,9 +80,18 @@
       height: 100%;
     }
   }
+
   .open {
     .users-commented {
       padding: 12px;
     }
+
+
+    .header,
+    .message,
+    .replies {
+      opacity: 1 !important;
+      display: flex !important;
+    }
   }
-}
+}