Add scroll container for connector sidebar

Author: jerelmiller

src/application/pages/connectors/$operationId.tsx

@@ -86,23 +86,25 @@ export function Route() {
         id="details"
         defaultSize={25}
         minSize={25}
-        className="h-full p-4 flex flex-col gap-6"
+        className="h-full p-4 overflow-hidden"
       >
-        <div className="flex flex-col gap-2">
-          <h2 className="text-heading dark:text-heading-dark font-medium text-lg">
-            Query
-          </h2>
-          <CodeBlock language="graphql" code={request.query} />
-        </div>
-        <div className="flex flex-col gap-2">
-          <h2 className="text-heading dark:text-heading-dark font-medium text-lg">
-            Variables
-          </h2>
-          <JSONTreeViewer
-            hideRoot={!isEmpty(request.variables)}
-            className="[&>li]:!pt-0"
-            data={request.variables ?? {}}
-          />
+        <div className="h-full flex flex-col gap-6 overflow-y-auto">
+          <div className="flex flex-col gap-2">
+            <h2 className="text-heading dark:text-heading-dark font-medium text-lg">
+              Query
+            </h2>
+            <CodeBlock language="graphql" code={request.query} />
+          </div>
+          <div className="flex flex-col gap-2">
+            <h2 className="text-heading dark:text-heading-dark font-medium text-lg">
+              Variables
+            </h2>
+            <JSONTreeViewer
+              hideRoot={!isEmpty(request.variables)}
+              className="[&>li]:!pt-0"
+              data={request.variables ?? {}}
+            />
+          </div>
         </div>
       </Panel>
     </>