From cc5f6f5804e75f8cc2d0392868a2f2a3a78b08d0 Mon Sep 17 00:00:00 2001
From: salmonumbrella <182032677+salmonumbrella@users.noreply.github.com>
Date: Wed, 24 Dec 2025 04:56:01 -0800
Subject: [PATCH] fix: add overflow handling to hot keys dropdown

Add max-height and overflow-y to prevent the workflow selector
dropdown from extending beyond the viewport when there are many
workflows.

Fixes #144
---
 src/HotKeyPanel.tsx | 1 +
 src/index.ts        | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/src/HotKeyPanel.tsx b/src/HotKeyPanel.tsx
index 3d69f10..fea02f6 100644
--- a/src/HotKeyPanel.tsx
+++ b/src/HotKeyPanel.tsx
@@ -81,6 +81,7 @@ const HotKeyEntry = ({
           }}
           transformItem={(e) => workflowNamesByUid[e]}
           className={"w-full"}
+          popoverProps={{ portalClassName: "roamjs-hotkey-dropdown" }}
         />
       </Label>
       <Button
diff --git a/src/index.ts b/src/index.ts
index 113a35e..fd50bac 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -107,6 +107,11 @@ export default runExtension(async ({ extensionAPI }) => {
 .roamjs-smartblock-menu {
   width: 300px;
 }
+
+.roamjs-hotkey-dropdown .bp3-menu {
+  max-height: 300px;
+  overflow-y: auto;
+}
 .rm-settings-tabs .roamjs-daily-config-tabs .bp3-tab-list {
   padding: 2px;
   background: none;