Merge pull request #335 from mylanvoos/main

[ell-studio] Update CodeSection clickable area and fix overlapping Invocation Panes
MadcowD · Oct 29, 2024 · 05da58c · 05da58c
2 parents 37fb5d6 + 6ad907a
commit 05da58c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 11 deletions.
diff --git 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" && (

diff --git 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}