updated

app/src/styles/scene/comments.scss

@@ -56,16 +56,23 @@
 
       .message {
         margin-top: 10px;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        text-align: start;
       }
 
-      .replies {
+      .replies,
+      .comments {
         margin-top: 4px;
         font-size: var(--font-size-small);
         color: var(--input-text-color);
       }
       .header,
       .message,
-      .replies {
+      .replies,
+      .comments {
         display: none;
         opacity: 0;
       }
@@ -84,9 +91,15 @@
     .users-commented {
       padding: 12px;
     }
+    .message {
+      display: -webkit-box !important;
+      opacity: 1 !important;
+      margin-bottom: 4px;
+      padding: 0;
+    }
     .header,
-    .message,
-    .replies {
+    .replies,
+    .comments {
       display: flex !important;
       opacity: 1 !important;
     }
@@ -158,11 +171,13 @@
     .messages-wrapper {
       padding: 12px;
       padding-top: 0;
+      max-height: 50vh;
+      overflow-y: auto;
       .edit-container {
         .input-container {
-          textarea{
+          textarea {
             background: var(--background-color);
-            &:focus{
+            &:focus {
               outline-color: var(--border-color-accent);
             }
           }
@@ -195,7 +210,7 @@
         align-items: flex-start;
         gap: 12px;
         margin-top: 8px;
-        &:first-child{
+        &:first-child {
           margin: 0;
         }
         .profile {
@@ -231,7 +246,7 @@
             height: 18px;
             width: 18px;
             border-radius: #{$border-radius-small};
-            &:hover{
+            &:hover {
               background: var(--background-color-solid);
             }
           }
@@ -249,14 +264,14 @@
               border-radius: #{$border-radius-medium};
               padding: 2px 6px;
               text-align: start;
-              &:hover{
+              &:hover {
                 background: var(--background-color-accent);
                 color: var(--text-button-color);
               }
             }
           }
         }
-        .message{
+        .message {
           margin-top: 6px;
         }
       }
@@ -284,7 +299,9 @@
           bottom: 2px;
           @include flex-center;
           padding: 2px;
+          cursor: pointer;
           svg {
+            pointer-events: none;
             rotate: 45deg;
           }
         }

app/src/styles/scene/scene.scss

@@ -98,7 +98,7 @@
   right: 1.5%;
   z-index: 10;
   border-radius: 8px;
-
+  transition: all 0.3s ease-in-out;
   .input-toggle-container {
     padding: 0;
     display: flex;
@@ -117,4 +117,9 @@
       }
     }
   }
+
+
+}
+.label-toogler.bottom{
+  bottom: 32%;
 }