From 1c990ba0a5e2742f6c4f0037057131d24b4dc963 Mon Sep 17 00:00:00 2001
From: Junyi <mytharcher@users.noreply.github.com>
Date: Sun, 2 Jun 2024 23:01:35 +0800
Subject: [PATCH] fix(plugin-workflow): fix workflow version dropdown overflow
 (#4542)

---
 .../src/client/WorkflowCanvas.tsx             | 69 +++++++++----------
 .../plugin-workflow/src/client/style.tsx      |  3 +
 2 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/packages/plugins/@nocobase/plugin-workflow/src/client/WorkflowCanvas.tsx b/packages/plugins/@nocobase/plugin-workflow/src/client/WorkflowCanvas.tsx
index d9b7aaf57c..7e7595db76 100644
--- a/packages/plugins/@nocobase/plugin-workflow/src/client/WorkflowCanvas.tsx
+++ b/packages/plugins/@nocobase/plugin-workflow/src/client/WorkflowCanvas.tsx
@@ -177,41 +177,40 @@ export function WorkflowCanvas() {
           />
         </header>
         <aside>
-          <div className="workflow-versions">
-            <Dropdown
-              trigger={['click']}
-              menu={{
-                onClick: onSwitchVersion,
-                defaultSelectedKeys: [`${workflow.id}`],
-                className: cx(styles.dropdownClass, styles.workflowVersionDropdownClass),
-                items: revisions
-                  .sort((a, b) => b.id - a.id)
-                  .map((item, index) => ({
-                    role: 'button',
-                    'aria-label': `version-${index}`,
-                    key: `${item.id}`,
-                    icon: item.current ? <RightOutlined /> : null,
-                    className: cx({
-                      executed: item.executed,
-                      unexecuted: !item.executed,
-                      enabled: item.enabled,
-                    }),
-                    label: (
-                      <>
-                        <strong>{`#${item.id}`}</strong>
-                        <time>{str2moment(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}</time>
-                      </>
-                    ),
-                  })),
-              }}
-            >
-              <Button type="text" aria-label="version">
-                <label>{lang('Version')}</label>
-                <span>{workflow?.id ? `#${workflow.id}` : null}</span>
-                <DownOutlined />
-              </Button>
-            </Dropdown>
-          </div>
+          <Dropdown
+            className="workflow-versions"
+            trigger={['click']}
+            menu={{
+              onClick: onSwitchVersion,
+              defaultSelectedKeys: [`${workflow.id}`],
+              className: cx(styles.dropdownClass, styles.workflowVersionDropdownClass),
+              items: revisions
+                .sort((a, b) => b.id - a.id)
+                .map((item, index) => ({
+                  role: 'button',
+                  'aria-label': `version-${index}`,
+                  key: `${item.id}`,
+                  icon: item.current ? <RightOutlined /> : null,
+                  className: cx({
+                    executed: item.executed,
+                    unexecuted: !item.executed,
+                    enabled: item.enabled,
+                  }),
+                  label: (
+                    <>
+                      <strong>{`#${item.id}`}</strong>
+                      <time>{str2moment(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}</time>
+                    </>
+                  ),
+                })),
+            }}
+          >
+            <Button type="text" aria-label="version">
+              <label>{lang('Version')}</label>
+              <span>{workflow?.id ? `#${workflow.id}` : null}</span>
+              <DownOutlined />
+            </Button>
+          </Dropdown>
           <Switch
             checked={workflow.enabled}
             onChange={onToggle}
diff --git a/packages/plugins/@nocobase/plugin-workflow/src/client/style.tsx b/packages/plugins/@nocobase/plugin-workflow/src/client/style.tsx
index 23ddaf00b0..78e5ddc9a3 100644
--- a/packages/plugins/@nocobase/plugin-workflow/src/client/style.tsx
+++ b/packages/plugins/@nocobase/plugin-workflow/src/client/style.tsx
@@ -96,6 +96,9 @@ const useStyles = createStyles(({ css, token }) => {
     `,
 
     workflowVersionDropdownClass: css`
+      max-height: 80vh;
+      overflow-y: auto;
+
       .ant-dropdown-menu-item {
         .ant-dropdown-menu-title-content {
           strong {