From 46b788664cbd384f1c32037115ab5a1574f2098e Mon Sep 17 00:00:00 2001
From: myanv <mavdbt@gmail.com>
Date: Fri, 25 Oct 2024 20:52:27 +1300
Subject: [PATCH 1/2] Modify CodeSection so that clicking on entire div
 collapses code

---
 ell-studio/src/components/source/CodeSection.js | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/ell-studio/src/components/source/CodeSection.js b/ell-studio/src/components/source/CodeSection.js
index 0de2705ee..d3db05f3c 100644
--- a/ell-studio/src/components/source/CodeSection.js
+++ b/ell-studio/src/components/source/CodeSection.js
@@ -54,12 +54,8 @@ export function CodeSection({
     };
 
     return (
-      <div className="code-section mb-4">
-        <div onClick={(e) => {
-          if (e.target === e.currentTarget) {
-            setShowCode(!showCode);
-          }
-        }}
+      <div className="code-section mb-4" onClick={() => setShowCode(!showCode)}>
+        <div 
           className="section-header flex items-center justify-between w-full text-sm text-gray-300 
           hover:text-white py-2 px-4 rounded-t-md bg-gray-800 hover:bg-gray-700 transition-colors 
           duration-200 cursor-pointer">
@@ -70,7 +66,7 @@ export function CodeSection({
             {showCode ? <FiChevronDown className="mr-2" /> : <FiChevronRight className="mr-2" />}
             {title}
           </button>
-          <div className="flex items-center">
+          <div className="flex items-center" onClick={(e) => e.stopPropagation()}>
             {enableFormatToggle && (
               <button
                 onClick={toggleFormat}

From 6ad907a64b8e3315261bb6203316ff8de7c14173 Mon Sep 17 00:00:00 2001
From: myanv <mavdbt@gmail.com>
Date: Fri, 25 Oct 2024 21:02:48 +1300
Subject: [PATCH 2/2] Fix InvocationDataPane overlapping InvocationInfoPane on
 narrow screens

---
 .../invocations/details/InvocationDetailsPopover.js      | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/ell-studio/src/components/invocations/details/InvocationDetailsPopover.js b/ell-studio/src/components/invocations/details/InvocationDetailsPopover.js
index e93ee24fc..7966cdaf9 100644
--- a/ell-studio/src/components/invocations/details/InvocationDetailsPopover.js
+++ b/ell-studio/src/components/invocations/details/InvocationDetailsPopover.js
@@ -7,6 +7,7 @@ import InvocationDataPane from './InvocationDataPane';
 import { motion } from 'framer-motion';
 import { LMPCardTitle } from "../../depgraph/LMPCardTitle";
 import { Card } from "../../common/Card";
+import { ScrollArea } from "@radix-ui/react-scroll-area";
 
 const InvocationDetailsPopover = ({ invocation, onClose, onResize }) => {
   const [activeTab, setActiveTab] = useState("I/O");
@@ -102,14 +103,14 @@ const InvocationDetailsPopover = ({ invocation, onClose, onResize }) => {
             transition={{ duration: 0.2 }}
           >
             {activeTab === "I/O" && (
-              <div className="h-full">
+              <ScrollArea>
                 <InvocationDataPane invocation={invocation} />
-              </div>
+              </ScrollArea>
             )}
             {(activeTab === "Info" || isNarrowForInfo) && (
-              <div className="h-full">
+              <ScrollArea>
                 <InvocationInfoPane invocation={invocation} isFullWidth={true} />
-              </div>
+              </ScrollArea>
             )}
           </motion.div>
           {!isNarrowForInfo && activeTab === "I/O" && (