Limit length of the user filter list in notebook

This prevents long lists from going off-screen and becoming unwieldy.

src/sidebar/components/FilterSelect.js

@@ -43,7 +43,7 @@ function FilterSelect({
   );
 
   return (
-    <Menu label={menuLabel} title={title}>
+    <Menu label={menuLabel} title={title} contentClass="FilterSelect__menu">
       {filterOptions.map(filterOption => (
         <MenuItem
           onClick={() => onSelect(filterOption)}

src/styles/sidebar/components/FilterSelect.scss

@@ -2,6 +2,17 @@
 @use "../../variables" as var;
 
 .FilterSelect {
+  &__menu {
+    // Prevent the list from overflowing off screen in most cases.
+    max-height: 70vh;
+    overflow-y: auto;
+
+    // Limit the length for large screens.
+    @media only screen and (min-height: 44em) {
+      max-height: 36em;
+    }
+  }
+
   &__menu-label {
     @include utils.font--large;
     align-items: center;