From b1508e1631377ca0a81f1461c3ab42e4c864db22 Mon Sep 17 00:00:00 2001
From: Connor Yoh <connor@stirlingpdf.com>
Date: Mon, 25 Aug 2025 15:10:51 +0100
Subject: [PATCH] Moved scroll out to tool panel and works better with zoom

---
 frontend/src/components/tools/ToolPanel.tsx   | 19 +++++++++++--------
 .../tools/shared/createToolFlow.tsx           |  3 ++-
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/tools/ToolPanel.tsx b/frontend/src/components/tools/ToolPanel.tsx
index a846978d6..69a012690 100644
--- a/frontend/src/components/tools/ToolPanel.tsx
+++ b/frontend/src/components/tools/ToolPanel.tsx
@@ -8,6 +8,7 @@ import ToolRenderer from './ToolRenderer';
 import ToolSearch from './toolPicker/ToolSearch';
 import { useSidebarContext } from "../../contexts/SidebarContext";
 import rainbowStyles from '../../styles/rainbow.module.css';
+import { Stack, ScrollArea } from '@mantine/core';
 
 // No props needed - component uses context
 
@@ -91,15 +92,17 @@ export default function ToolPanel() {
           </div>
         ) : (
           // Selected Tool Content View
-          <div className="flex-1 flex flex-col">
+          <div className="flex-1 flex flex-col overflow-hidden">
             {/* Tool content */}
-            <div className="flex-1 min-h-0">
-              {selectedToolKey && (
-                <ToolRenderer
-                  selectedToolKey={selectedToolKey}
-                  onPreviewFile={setPreviewFile}
-                />
-              )}
+            <div className="flex-1 min-h-0 overflow-hidden">
+              <ScrollArea h="100%">
+                {selectedToolKey && (
+                  <ToolRenderer
+                    selectedToolKey={selectedToolKey}
+                    onPreviewFile={setPreviewFile}
+                  />
+                )}
+              </ScrollArea>
             </div>
           </div>
         )}
diff --git a/frontend/src/components/tools/shared/createToolFlow.tsx b/frontend/src/components/tools/shared/createToolFlow.tsx
index d523ff6f6..da2503b4e 100644
--- a/frontend/src/components/tools/shared/createToolFlow.tsx
+++ b/frontend/src/components/tools/shared/createToolFlow.tsx
@@ -65,7 +65,8 @@ export function createToolFlow(config: ToolFlowConfig) {
   const steps = createToolSteps();
 
   return (
-    <Stack gap="sm" p="sm" h="95vh" w="100%" style={{ overflow: 'auto' }}>
+    <Stack gap="sm" p="sm" >
+    {/* <Stack gap="sm" p="sm" h="100%" w="100%" style={{ overflow: 'auto' }}> */}
       <ToolStepProvider forceStepNumbers={config.forceStepNumbers}>
         {config.title && <ToolWorkflowTitle {...config.title} />}