fix: LEAP-1581: Improve styles in new comments (#6537)

There is a handy `-webkit-line-clamp` rule! All items are inlined to be just a text, but truncated after 3 lines, so should be good for a lot of different content.
Also scales down the comment icon to always fit it inside usual editor screen with paddings. Fixes LEAP-1578
Style fixes for comment's classification after LEAP-1476

web/libs/editor/src/components/Comments/Comment/CommentForm.scss

@@ -64,7 +64,7 @@
     border-top: none;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
-    padding-top: 4px;
+    padding-top: 7px;
     margin-top: -8px;
     overflow: hidden;
   }

web/libs/editor/src/components/Comments/Comment/CommentItem.scss

@@ -115,6 +115,15 @@
     overflow: hidden;
   }
 
+  .comment_form {
+    // to hide the weird glow below the focused form, because it has outline but it's already cut off
+    overflow: hidden;
+  }
+
+  &__classifications-row {
+    margin-top: 4px;
+  }
+
   &__classifications-row > div {
     width: 100%;
   }

web/libs/editor/src/components/Comments/Comment/LinkState.scss

@@ -27,6 +27,10 @@
 
     .link-state_display & {
       color: var(--secondary-action-color-hover);
+
+      // align linked region icon with the rest
+      align-self: flex-start;
+      transform: translateY(2px);
     }
 
     svg {
@@ -39,7 +43,7 @@
 .link-state-region {
   display: flex;
   flex-flow: row nowrap;
-  align-items: center;
+  align-items: flex-start; // text can be multiline
   gap: 4px;
   font-size: 1em;
   line-height: 1.2em;
@@ -71,6 +75,7 @@
   &__index {
     width: 18px;
     height: 18px;
+    margin-top: 3px; // to align with 24px icon
     display: flex;
     font-size: 9px;
     color: var(--sand_0);
@@ -84,20 +89,30 @@
 
   &__title {
     align-items: center;
-    display: inline-flex;
     flex: 1;
     color: var(--text-color, var(--sand_900));
     min-width: 0;
+    margin-top: 3px; // to align with icon and index
+
+    /// text-overflow for multiline texts
+    /// @see https://stackoverflow.com/a/41137262/308527
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
 
-    //// @todo use these styles if we don't need multiline texts
-    // overflow: hidden;
-    // white-space: nowrap;
-    // text-overflow: ellipsis;
+    // reset style from parent to densify text
+    white-space: normal;
+
+    * {
+      display: inline;
+    }
   }
 
   &__label {
     flex: auto 1 0;
     max-width: 100%;
+    margin-right: 5px;
 
     & div {
       overflow: hidden;
@@ -113,11 +128,7 @@
   }
 
   &__text {
-    margin-left: 5px;
     color: var(--sand_900);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
   }
 
   &__close {

web/libs/editor/src/components/InteractiveOverlays/CommentsOverlay.module.scss

@@ -19,7 +19,9 @@
   }
 
   .commentIcon {
-    /* for the future */
+    // to fit into usual screen edges with paddings
+    scale: 0.8;
+    translate: -2px 4px;
   }
 
   .commentIconBackground {