🐛 Fix scrollbar on comments section

frontend/src/app/main/ui/workspace/comments.scss

@@ -9,132 +9,148 @@
 .comments-section {
   position: relative;
   background-color: var(--panel-background-color);
-  .comments-section-title {
+  display: grid;
-    @include flexCenter;
+  grid-template-rows: $s-40 $s-48 1fr;
-    @include tabTitleTipography;
+}
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: $s-32;
-    min-height: $s-32;
-    margin: $s-8 $s-8 0 $s-8;
-    border-radius: $br-8;
-    background-color: var(--panel-title-background-color);
-    span {
-      @include flexCenter;
-      flex-grow: 1;
-      color: var(--title-foreground-color-hover);
-    }
 
-    .close-button {
+.comments-section-title {
-      @extend .button-tertiary;
+  @include flexCenter;
-      height: $s-28;
+  @include tabTitleTipography;
-      width: $s-28;
+  display: flex;
-      border-radius: $br-6;
+  justify-content: space-between;
-      svg {
+  align-items: center;
-        @extend .button-icon;
+  height: $s-32;
-        stroke: var(--icon-foreground);
+  min-height: $s-32;
-      }
+  margin: $s-8 $s-8 0 $s-8;
+  border-radius: $br-8;
+  background-color: var(--panel-title-background-color);
+  span {
+    @include flexCenter;
+    flex-grow: 1;
+    color: var(--title-foreground-color-hover);
+  }
+}
+
+.close-button {
+  @extend .button-tertiary;
+  height: $s-28;
+  width: $s-28;
+  border-radius: $br-6;
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+  }
+}
+
+.mode-dropdown-wrapper {
+  @include buttonStyle;
+  @extend .asset-element;
+  background-color: var(--color-background-tertiary);
+  display: flex;
+  width: $s-256;
+  height: $s-32;
+  padding: $s-8;
+  border-radius: $br-8;
+  margin: $s-16 auto 0 auto;
+  cursor: pointer;
+  position: relative;
+}
+
+.mode-label {
+  padding-right: 8px;
+  flex-grow: 1;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.icon {
+  @include flexCenter;
+  padding-right: 8px;
+  height: $s-24;
+  width: $s-24;
+  svg {
+    @extend .button-icon-small;
+    transform: rotate(90deg);
+    stroke: var(--icon-foreground);
+  }
+}
+
+.comment-mode-dropdown {
+  @extend .dropdown-wrapper;
+  top: $s-80;
+  left: $s-12;
+  width: $s-256;
+}
+
+.dropdown-item {
+  @extend .dropdown-element-base;
+  justify-content: space-between;
+  .icon {
+    @include flexCenter;
+    height: $s-24;
+    width: $s-24;
+    svg {
+      @extend .button-icon-small;
+      stroke: transparent;
     }
   }
-  .mode-dropdown-wrapper {
+  .label {
-    @include buttonStyle;
+    @include titleTipography;
-    @extend .asset-element;
+  }
-    background-color: var(--color-background-tertiary);
+  &:hover {
-    display: flex;
+    .icon svg {
-    width: $s-256;
+      stroke: transparent;
-    height: $s-32;
-    padding: $s-8;
-    border-radius: $br-8;
-    margin: $s-16 auto 0 auto;
-    cursor: pointer;
-    position: relative;
-    .mode-label {
-      padding-right: 8px;
-      flex-grow: 1;
-      display: flex;
-      justify-content: flex-start;
-    }
-    .icon {
-      @include flexCenter;
-      padding-right: 8px;
-      height: $s-24;
-      width: $s-24;
-      svg {
-        @extend .button-icon-small;
-        transform: rotate(90deg);
-        stroke: var(--icon-foreground);
-      }
     }
   }
-  .comment-mode-dropdown {
+  &.selected {
-    @extend .dropdown-wrapper;
+    .label {
-    top: $s-80;
+      color: var(--menu-foreground-color);
-    left: $s-12;
-    width: $s-256;
-    .dropdown-item {
-      @extend .dropdown-element-base;
-      justify-content: space-between;
-      .icon {
-        @include flexCenter;
-        height: $s-24;
-        width: $s-24;
-        svg {
-          @extend .button-icon-small;
-          stroke: transparent;
-        }
-      }
-      .label {
-        @include titleTipography;
-      }
-      &:hover {
-        .icon svg {
-          stroke: transparent;
-        }
-      }
-      &.selected {
-        .label {
-          color: var(--menu-foreground-color);
-        }
-        .icon svg {
-          stroke: var(--icon-foreground-hover);
-        }
-      }
     }
-    .separator {
+    .icon svg {
-      height: $s-12;
+      stroke: var(--icon-foreground-hover);
-    }
-  }
-  .comments-section-content {
-    .thread-groups {
-      display: flex;
-      flex-direction: column;
-      gap: $s-24;
-    }
-    .thread-group-placeholder {
-      @include flexColumn;
-      align-items: center;
-      justify-content: flex-start;
-      margin-top: $s-36;
-      .placeholder-icon {
-        @include flexCenter;
-        height: $s-48;
-        width: $s-48;
-        border-radius: $br-circle;
-        background-color: var(--empty-message-background-color);
-        svg {
-          @extend .button-icon;
-          height: $s-28;
-          width: $s-28;
-          stroke: var(--empty-message-foreground-color);
-        }
-      }
-      .placeholder-label {
-        @include titleTipography;
-        text-align: center;
-        width: $s-184;
-        color: var(--empty-message-foreground-color);
-      }
     }
   }
 }
+
+.separator {
+  height: $s-12;
+}
+
+.comments-section-content {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.thread-groups {
+  display: flex;
+  flex-direction: column;
+  gap: $s-24;
+}
+
+.thread-group-placeholder {
+  @include flexColumn;
+  align-items: center;
+  justify-content: flex-start;
+  margin-top: $s-36;
+}
+
+.placeholder-icon {
+  @include flexCenter;
+  height: $s-48;
+  width: $s-48;
+  border-radius: $br-circle;
+  background-color: var(--empty-message-background-color);
+  svg {
+    @extend .button-icon;
+    height: $s-28;
+    width: $s-28;
+    stroke: var(--empty-message-foreground-color);
+  }
+}
+
+.placeholder-label {
+  @include titleTipography;
+  text-align: center;
+  width: $s-184;
+  color: var(--empty-message-foreground-color);
+}