fix: add overflow handling to hot keys dropdown

[salmonumbrella]

Summary

Fixes #144 - Adds overflow handling to the hot keys workflow selector dropdown.

Problem

When a user has many workflows, the dropdown in the hot keys settings panel extends beyond the viewport, making it difficult or impossible to select workflows at the bottom of the list.

Solution

• Added popoverProps with a custom portal class to the MenuItemSelect component in HotKeyPanel.tsx
• Added CSS rule for .roamjs-hotkey-dropdown .bp3-menu with max-height: 300px and overflow-y: auto

This makes the dropdown scrollable when there are many workflows.

Summary by CodeRabbit

Release Notes

• Style
  • Enhanced the hotkey dropdown menu with height constraints and vertical scrolling support, allowing for improved navigation when browsing through multiple hotkey options without layout disruption.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The changes address an overflow issue in the hotkey dropdown menu by applying styling and portal configuration. A MenuItemSelect component in HotKeyPanel.tsx receives a new popoverProps configuration that assigns the CSS class "roamjs-hotkey-dropdown" for portal rendering. Concurrently, a CSS rule is added to the stylesheet that limits the dropdown's height and enables vertical scrolling. These modifications do not alter underlying logic or functionality.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: adding overflow handling to the hot keys dropdown menu.
Linked Issues check	✅ Passed	The PR implementation fully addresses issue #144 by adding CSS overflow handling and portal styling to make the dropdown scrollable when workflows exceed viewport height.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the dropdown overflow issue with no unrelated modifications present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/index.ts (1)

111-114: LGTM! CSS overflow handling implemented correctly.

The CSS rule properly limits the dropdown height and enables vertical scrolling. The selector is appropriately scoped to avoid affecting other menus.

Optional: Consider responsive max-height

The fixed 300px max-height works well for most cases, but on smaller screens you might consider using viewport units for better responsiveness:

 .roamjs-hotkey-dropdown .bp3-menu {
-  max-height: 300px;
+  max-height: min(300px, 50vh);
   overflow-y: auto;
 }

This ensures the dropdown never exceeds 50% of the viewport height on smaller screens while maintaining the 300px limit on larger displays.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c1b7d43 and cc5f6f5.

📒 Files selected for processing (2)

• src/HotKeyPanel.tsx
• src/index.ts

🔇 Additional comments (1)

src/HotKeyPanel.tsx (1)

84-84: Portal class correctly configured for dropdown styling.

The popoverProps with portalClassName properly connects the CSS overflow rules from src/index.ts (lines 111-113) to this dropdown. MenuItemSelect from roamjs-components supports the popoverProps prop, forwarding it to Blueprint's Popover component, and the configuration is correct.

[mdroidian]

Woo! Thanks 👊