[Editor] Make scrollable the area containing the comments in the sidebar

web/comment_manager.css

@@ -480,116 +480,121 @@
     }
   }
 
-  #editorCommentsSidebarList {
+  #editorCommentsSidebarListContainer {
-    display: flex;
+    overflow: scroll;
-    width: auto;
-    padding: 1px 16px 0;
-    gap: 10px;
-    flex: 1 0 0;
-    align-self: stretch;
-    align-items: flex-start;
-    flex-direction: column;
-    list-style-type: none;
 
-    .sidebarComment {
+    #editorCommentsSidebarList {
       display: flex;
       width: auto;
-      padding: 8px 16px 16px;
+      padding: 1px 16px 0;
-      flex-direction: column;
+      gap: 10px;
-      align-items: flex-start;
+      flex: 1 0 0;
       align-self: stretch;
-      gap: 4px;
+      align-items: flex-start;
+      flex-direction: column;
+      list-style-type: none;
+      overflow: scroll;
 
-      border-radius: 8px;
+      .sidebarComment {
-      border: 0.5px solid var(--comment-border-color);
+        display: flex;
-      background-color: var(--comment-bg-color);
+        width: auto;
+        padding: 8px 16px 16px;
+        flex-direction: column;
+        align-items: flex-start;
+        align-self: stretch;
+        gap: 4px;
 
-      &:not(.noComments) {
+        border-radius: 8px;
-        &:hover {
+        border: 0.5px solid var(--comment-border-color);
-          background-color: var(--comment-hover-bg-color);
+        background-color: var(--comment-bg-color);
 
-          time::after {
+        &:not(.noComments) {
+          &:hover {
+            background-color: var(--comment-hover-bg-color);
+
+            time::after {
+              display: inline-block;
+              background-color: var(--comment-indicator-hover-fg-color);
+            }
+          }
+
+          &:active {
+            background-color: var(--comment-active-bg-color);
+
+            time::after {
+              display: inline-block;
+              background-color: var(--comment-indicator-active-fg-color);
+            }
+          }
+
+          &:is(:focus, :focus-visible) time::after {
             display: inline-block;
-            background-color: var(--comment-indicator-hover-fg-color);
+            background-color: var(--comment-indicator-focus-fg-color);
+          }
+
+          &:focus-visible {
+            outline: 2px solid var(--comment-focus-outline-color);
+            outline-offset: 2px;
+          }
+
+          &.selected {
+            .sidebarCommentText {
+              max-height: fit-content;
+              -webkit-line-clamp: unset;
+            }
+
+            time::after {
+              display: inline-block;
+              background-color: var(--comment-indicator-selected-fg-color);
+            }
           }
         }
 
-        &:active {
+        .sidebarCommentText {
-          background-color: var(--comment-active-bg-color);
+          font: menu;
+          font-style: normal;
+          font-weight: 400;
+          line-height: normal;
+          font-size: 15px;
+          width: 100%;
+          height: fit-content;
+          max-height: 80px;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          overflow-wrap: break-word;
+        }
 
-          time::after {
+        &.noComments .sidebarCommentText {
-            display: inline-block;
+          max-height: fit-content;
-            background-color: var(--comment-indicator-active-fg-color);
+          -webkit-line-clamp: unset;
+          user-select: none;
+        }
+
+        time {
+          width: 100%;
+          display: inline-flex;
+          align-items: center;
+          justify-content: space-between;
+
+          font: menu;
+          font-style: normal;
+          font-weight: 400;
+          line-height: normal;
+          font-size: 13px;
+
+          &::after {
+            content: "";
+            display: none;
+            width: 16px;
+            height: 16px;
+            mask-repeat: no-repeat;
+            mask-position: center;
+            mask-image: var(--comment-edit-button-icon);
+            transform: scaleX(var(--dir-factor));
           }
         }
-
-        &:is(:focus, :focus-visible) time::after {
-          display: inline-block;
-          background-color: var(--comment-indicator-focus-fg-color);
-        }
-
-        &:focus-visible {
-          outline: 2px solid var(--comment-focus-outline-color);
-          outline-offset: 2px;
-        }
-
-        &.selected {
-          .sidebarCommentText {
-            max-height: fit-content;
-            -webkit-line-clamp: unset;
-          }
-
-          time::after {
-            display: inline-block;
-            background-color: var(--comment-indicator-selected-fg-color);
-          }
-        }
-      }
-
-      .sidebarCommentText {
-        font: menu;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-        font-size: 15px;
-        width: 100%;
-        height: fit-content;
-        max-height: 80px;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        overflow: hidden;
-        overflow-wrap: break-word;
-      }
-
-      &.noComments .sidebarCommentText {
-        max-height: fit-content;
-        -webkit-line-clamp: unset;
-        user-select: none;
-      }
-
-      time {
-        width: 100%;
-        display: inline-flex;
-        align-items: center;
-        justify-content: space-between;
-
-        font: menu;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-        font-size: 13px;
-
-        &::after {
-          content: "";
-          display: none;
-          width: 16px;
-          height: 16px;
-          mask-repeat: no-repeat;
-          mask-position: center;
-          mask-image: var(--comment-edit-button-icon);
-          transform: scaleX(var(--dir-factor));
-        }
       }
     }
   }

web/viewer.html

@@ -260,7 +260,9 @@ See https://github.com/adobe-type-tools/cmap-resources
                             <span data-l10n-id="pdfjs-editor-comments-sidebar-close-button-label"></span>
                           </button>
                         </div>
-                        <ul id="editorCommentsSidebarList"></ul>
+                        <div id="editorCommentsSidebarListContainer">
+                          <ul id="editorCommentsSidebarList"></ul>
+                        </div>
                       </div>
                     </div>
                   </div>