From 80c8494fd35bdcd8d6e1c753aac5e439f35628f6 Mon Sep 17 00:00:00 2001
From: Sipke Schoorstra <sipkeschoorstra@outlook.com>
Date: Thu, 5 Jan 2023 15:21:26 +0100
Subject: [PATCH] Apply scroll overflow to activity picker (#3599)

---
 .../components/toolbox.tsx                    | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/components/toolbox.tsx b/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/components/toolbox.tsx
index 70f610687..a37a6c25e 100644
--- a/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/components/toolbox.tsx
+++ b/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/components/toolbox.tsx
@@ -22,23 +22,26 @@ export class Toolbox {
 
     return (
 
-      <div class="activity-list">
+      <div class="activity-list  absolute inset-0 overflow-hidden">
+        <div class="h-full flex flex-col">
+          <div class="border-b border-gray-200">
+            <nav class="-mb-px flex" aria-label="Tabs">
+              <a href="#"
+                 onClick={e => this.onTabSelected(e, 0)}
+                 class={`${activitiesTabCssClass} w-1/2 py-4 px-1 text-center border-b-2 font-medium text-sm`}>
+                Activities
+              </a>
+            </nav>
+          </div>
 
-        <div class="border-b border-gray-200">
-          <nav class="-mb-px flex" aria-label="Tabs">
-            <a href="#"
-               onClick={e => this.onTabSelected(e, 0)}
-               class={`${activitiesTabCssClass} w-1/2 py-4 px-1 text-center border-b-2 font-medium text-sm`}>
-              Activities
-            </a>
-
-          </nav>
+          <div class="flex-1 relative">
+            <div class="absolute inset-0 overflow-y-scroll">
+              <elsa-workflow-definition-editor-toolbox-activities
+                graph={this.graph}
+                class={selectedTabIndex == 0 ? '' : 'hidden'}/>
+            </div>
+          </div>
         </div>
-
-        <elsa-workflow-definition-editor-toolbox-activities
-          graph={this.graph}
-          class={selectedTabIndex == 0 ? '' : 'hidden'}/>
-
       </div>
     );
   }