fix: notes list options menu size regression (#910)

* feat: add new utility class

* fix: notes list options menu sizing

* fix: remove unnecessary class

* feat: remove unnecessary class

app/assets/javascripts/components/NotesListOptionsMenu.tsx

@@ -16,10 +16,6 @@ type Props = {
 
 export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
   ({ closeDisplayOptionsMenu, closeOnBlur, application, isOpen }) => {
-    const menuClassName =
-      'sn-dropdown sn-dropdown--animated min-w-70 overflow-y-auto \
-border-1 border-solid border-main text-sm z-index-dropdown-menu \
-flex flex-col py-2 top-full bottom-0 left-2 absolute';
     const [sortBy, setSortBy] = useState(() =>
       application.getPreference(PrefKey.SortNotesBy, CollectionSort.CreatedAt)
     );
@@ -117,154 +113,155 @@ flex flex-col py-2 top-full bottom-0 left-2 absolute';
       application.setPreference(PrefKey.NotesHideEditorIcon, !hideEditorIcon);
     };
 
-    const menuRef = useRef<HTMLDivElement>(null);
-
     return (
-      <div ref={menuRef} className={menuClassName}>
-        <Menu
-          a11yLabel="Notes list options menu"
-          closeMenu={closeDisplayOptionsMenu}
-          isOpen={isOpen}
+      <Menu
+        className={
+          'sn-dropdown sn-dropdown--animated min-w-70 max-h-120 overflow-y-auto \
+        border-1 border-solid border-main text-sm z-index-dropdown-menu \
+        flex flex-col py-2 top-full left-2 absolute'
+        }
+        a11yLabel="Notes list options menu"
+        closeMenu={closeDisplayOptionsMenu}
+        isOpen={isOpen}
+      >
+        <div className="px-3 my-1 text-xs font-semibold color-text uppercase">
+          Sort by
+        </div>
+        <MenuItem
+          className="py-2"
+          type={MenuItemType.RadioButton}
+          onClick={toggleSortByDateModified}
+          checked={sortBy === CollectionSort.UpdatedAt}
+          onBlur={closeOnBlur}
         >
-          <div className="px-3 my-1 text-xs font-semibold color-text uppercase">
-            Sort by
+          <div className="flex flex-grow items-center justify-between">
+            <span>Date modified</span>
+            {sortBy === CollectionSort.UpdatedAt ? (
+              sortReverse ? (
+                <Icon type="arrows-sort-up" className="color-neutral" />
+              ) : (
+                <Icon type="arrows-sort-down" className="color-neutral" />
+              )
+            ) : null}
           </div>
-          <MenuItem
-            className="py-2"
-            type={MenuItemType.RadioButton}
-            onClick={toggleSortByDateModified}
-            checked={sortBy === CollectionSort.UpdatedAt}
-            onBlur={closeOnBlur}
-          >
-            <div className="flex flex-grow items-center justify-between">
-              <span>Date modified</span>
-              {sortBy === CollectionSort.UpdatedAt ? (
-                sortReverse ? (
-                  <Icon type="arrows-sort-up" className="color-neutral" />
-                ) : (
-                  <Icon type="arrows-sort-down" className="color-neutral" />
-                )
-              ) : null}
-            </div>
-          </MenuItem>
-          <MenuItem
-            className="py-2"
-            type={MenuItemType.RadioButton}
-            onClick={toggleSortByCreationDate}
-            checked={sortBy === CollectionSort.CreatedAt}
-            onBlur={closeOnBlur}
-          >
-            <div className="flex flex-grow items-center justify-between">
-              <span>Creation date</span>
-              {sortBy === CollectionSort.CreatedAt ? (
-                sortReverse ? (
-                  <Icon type="arrows-sort-up" className="color-neutral" />
-                ) : (
-                  <Icon type="arrows-sort-down" className="color-neutral" />
-                )
-              ) : null}
-            </div>
-          </MenuItem>
-          <MenuItem
-            className="py-2"
-            type={MenuItemType.RadioButton}
-            onClick={toggleSortByTitle}
-            checked={sortBy === CollectionSort.Title}
-            onBlur={closeOnBlur}
-          >
-            <div className="flex flex-grow items-center justify-between">
-              <span>Title</span>
-              {sortBy === CollectionSort.Title ? (
-                sortReverse ? (
-                  <Icon type="arrows-sort-up" className="color-neutral" />
-                ) : (
-                  <Icon type="arrows-sort-down" className="color-neutral" />
-                )
-              ) : null}
-            </div>
-          </MenuItem>
-          <MenuItemSeparator />
-          <div className="px-3 py-1 text-xs font-semibold color-text uppercase">
-            View
+        </MenuItem>
+        <MenuItem
+          className="py-2"
+          type={MenuItemType.RadioButton}
+          onClick={toggleSortByCreationDate}
+          checked={sortBy === CollectionSort.CreatedAt}
+          onBlur={closeOnBlur}
+        >
+          <div className="flex flex-grow items-center justify-between">
+            <span>Creation date</span>
+            {sortBy === CollectionSort.CreatedAt ? (
+              sortReverse ? (
+                <Icon type="arrows-sort-up" className="color-neutral" />
+              ) : (
+                <Icon type="arrows-sort-down" className="color-neutral" />
+              )
+            ) : null}
           </div>
-          <MenuItem
-            type={MenuItemType.SwitchButton}
-            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-            checked={!hidePreview}
-            onChange={toggleHidePreview}
-            onBlur={closeOnBlur}
-          >
-            <div className="flex flex-col max-w-3/4">Show note preview</div>
-          </MenuItem>
-          <MenuItem
-            type={MenuItemType.SwitchButton}
-            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-            checked={!hideDate}
-            onChange={toggleHideDate}
-            onBlur={closeOnBlur}
-          >
-            Show date
-          </MenuItem>
-          <MenuItem
-            type={MenuItemType.SwitchButton}
-            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-            checked={!hideTags}
-            onChange={toggleHideTags}
-            onBlur={closeOnBlur}
-          >
-            Show tags
-          </MenuItem>
-          <MenuItem
-            type={MenuItemType.SwitchButton}
-            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-            checked={!hideEditorIcon}
-            onChange={toggleEditorIcon}
-            onBlur={closeOnBlur}
-          >
-            Show editor icon
-          </MenuItem>
-          <div className="h-1px my-2 bg-border"></div>
-          <div className="px-3 py-1 text-xs font-semibold color-text uppercase">
-            Other
+        </MenuItem>
+        <MenuItem
+          className="py-2"
+          type={MenuItemType.RadioButton}
+          onClick={toggleSortByTitle}
+          checked={sortBy === CollectionSort.Title}
+          onBlur={closeOnBlur}
+        >
+          <div className="flex flex-grow items-center justify-between">
+            <span>Title</span>
+            {sortBy === CollectionSort.Title ? (
+              sortReverse ? (
+                <Icon type="arrows-sort-up" className="color-neutral" />
+              ) : (
+                <Icon type="arrows-sort-down" className="color-neutral" />
+              )
+            ) : null}
           </div>
-          <MenuItem
-            type={MenuItemType.SwitchButton}
-            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-            checked={!hidePinned}
-            onChange={toggleHidePinned}
-            onBlur={closeOnBlur}
-          >
-            Show pinned notes
-          </MenuItem>
-          <MenuItem
-            type={MenuItemType.SwitchButton}
-            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-            checked={!hideProtected}
-            onChange={toggleHideProtected}
-            onBlur={closeOnBlur}
-          >
-            Show protected notes
-          </MenuItem>
-          <MenuItem
-            type={MenuItemType.SwitchButton}
-            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-            checked={showArchived}
-            onChange={toggleShowArchived}
-            onBlur={closeOnBlur}
-          >
-            Show archived notes
-          </MenuItem>
-          <MenuItem
-            type={MenuItemType.SwitchButton}
-            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-            checked={showTrashed}
-            onChange={toggleShowTrashed}
-            onBlur={closeOnBlur}
-          >
-            Show trashed notes
-          </MenuItem>
-        </Menu>
-      </div>
+        </MenuItem>
+        <MenuItemSeparator />
+        <div className="px-3 py-1 text-xs font-semibold color-text uppercase">
+          View
+        </div>
+        <MenuItem
+          type={MenuItemType.SwitchButton}
+          className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+          checked={!hidePreview}
+          onChange={toggleHidePreview}
+          onBlur={closeOnBlur}
+        >
+          <div className="flex flex-col max-w-3/4">Show note preview</div>
+        </MenuItem>
+        <MenuItem
+          type={MenuItemType.SwitchButton}
+          className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+          checked={!hideDate}
+          onChange={toggleHideDate}
+          onBlur={closeOnBlur}
+        >
+          Show date
+        </MenuItem>
+        <MenuItem
+          type={MenuItemType.SwitchButton}
+          className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+          checked={!hideTags}
+          onChange={toggleHideTags}
+          onBlur={closeOnBlur}
+        >
+          Show tags
+        </MenuItem>
+        <MenuItem
+          type={MenuItemType.SwitchButton}
+          className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+          checked={!hideEditorIcon}
+          onChange={toggleEditorIcon}
+          onBlur={closeOnBlur}
+        >
+          Show editor icon
+        </MenuItem>
+        <div className="h-1px my-2 bg-border"></div>
+        <div className="px-3 py-1 text-xs font-semibold color-text uppercase">
+          Other
+        </div>
+        <MenuItem
+          type={MenuItemType.SwitchButton}
+          className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+          checked={!hidePinned}
+          onChange={toggleHidePinned}
+          onBlur={closeOnBlur}
+        >
+          Show pinned notes
+        </MenuItem>
+        <MenuItem
+          type={MenuItemType.SwitchButton}
+          className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+          checked={!hideProtected}
+          onChange={toggleHideProtected}
+          onBlur={closeOnBlur}
+        >
+          Show protected notes
+        </MenuItem>
+        <MenuItem
+          type={MenuItemType.SwitchButton}
+          className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+          checked={showArchived}
+          onChange={toggleShowArchived}
+          onBlur={closeOnBlur}
+        >
+          Show archived notes
+        </MenuItem>
+        <MenuItem
+          type={MenuItemType.SwitchButton}
+          className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+          checked={showTrashed}
+          onChange={toggleShowTrashed}
+          onBlur={closeOnBlur}
+        >
+          Show trashed notes
+        </MenuItem>
+      </Menu>
     );
   }
 );