From 4bdc39e4d2f88a53cc1743c524b9a659ed01aa09 Mon Sep 17 00:00:00 2001
From: Gerard <clos.gerard@gmail.com>
Date: Tue, 1 Oct 2024 15:44:30 +0200
Subject: [PATCH] fix: heights (#318)

We had some shenanigans with heights in documents with lots of inputs.
This fixes it.
---
 .../Editor/Playground/index.tsx               | 32 +++++++++----------
 .../EvaluationEditor/Editor/index.tsx         |  2 +-
 .../Editor/Playground/index.tsx               | 26 +++++++--------
 .../DocumentEditor/Editor/index.tsx           |  2 +-
 4 files changed, 29 insertions(+), 33 deletions(-)

diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/index.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/index.tsx
index 67e361c58..45c663cb9 100644
--- a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/index.tsx
+++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/index.tsx
@@ -98,25 +98,23 @@ export default function Playground({
           </Link>
         )}
       </div>
-      <div className='flex flex-col gap-6 h-full relative'>
+      <div className='flex flex-col gap-6'>
         <Variables providerLog={providerLog} />
-        <div className='flex flex-col h-full'>
+        <div className='flex flex-col flex-grow'>
           <div className='flex flex-col flex-grow flex-shrink relative h-full overflow-y-auto'>
-            <div className='absolute top-0 left-0 right-0 bottom-0'>
-              {mode === 'preview' ? (
-                <Preview
-                  metadata={metadata}
-                  parameters={parameters}
-                  runPrompt={() => setMode('chat')}
-                />
-              ) : (
-                <Chat
-                  evaluation={evaluation}
-                  parameters={parameters}
-                  clearChat={() => setMode('preview')}
-                />
-              )}
-            </div>
+            {mode === 'preview' ? (
+              <Preview
+                metadata={metadata}
+                parameters={parameters}
+                runPrompt={() => setMode('chat')}
+              />
+            ) : (
+              <Chat
+                evaluation={evaluation}
+                parameters={parameters}
+                clearChat={() => setMode('preview')}
+              />
+            )}
           </div>
         </div>
       </div>
diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/index.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/index.tsx
index 875462c08..02a880861 100644
--- a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/index.tsx
+++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/index.tsx
@@ -92,7 +92,7 @@ export default function EvaluationEditor({
           />
         </Suspense>
       </div>
-      <div className='flex flex-col flex-1 gap-2 min-w-0 max-w-1/2'>
+      <div className='flex flex-col flex-1 gap-2 min-w-0 max-w-1/2 overflow-y-auto max-h-[calc(100vh-150px)]'>
         <Playground evaluation={evaluation} metadata={metadata!} />
       </div>
     </div>
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/index.tsx
index cebd7b158..69029bfd8 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/index.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/index.tsx
@@ -64,8 +64,8 @@ export default function Playground({
           </Button>
         )}
       </Header>
-      <div className='flex flex-col gap-6 h-full relative'>
-        <div className='flex flex-col gap-3'>
+      <div className='flex flex-col gap-6 relative'>
+        <div className='flex flex-col gap-3 max-h-[35vh] overflow-y-auto'>
           <Text.H6M>Inputs</Text.H6M>
           {Object.keys(inputs).length > 0 ? (
             Object.entries(inputs).map(([param, value], idx) => (
@@ -88,19 +88,17 @@ export default function Playground({
             </Text.H6>
           )}
         </div>
-        <div className='flex flex-col gap-3 h-full'>
+        <div className='flex flex-col flex-grow gap-3'>
           <div className='flex flex-col flex-grow flex-shrink relative h-full overflow-y-auto'>
-            <div className='absolute top-0 left-0 right-0 bottom-0'>
-              {mode === 'preview' ? (
-                <Preview
-                  metadata={metadata}
-                  parameters={parameters}
-                  runPrompt={() => setMode('chat')}
-                />
-              ) : (
-                <Chat document={document} parameters={parameters} />
-              )}
-            </div>
+            {mode === 'preview' ? (
+              <Preview
+                metadata={metadata}
+                parameters={parameters}
+                runPrompt={() => setMode('chat')}
+              />
+            ) : (
+              <Chat document={document} parameters={parameters} />
+            )}
           </div>
         </div>
       </div>
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/index.tsx
index 0206b3449..7f9630c97 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/index.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/index.tsx
@@ -158,7 +158,7 @@ export default function DocumentEditor({
             />
           </Suspense>
         </div>
-        <div className='flex flex-col flex-1 gap-2'>
+        <div className='flex flex-col flex-1 gap-2 overflow-y-auto max-h-[calc(100vh-150px)]'>
           <Playground document={document} metadata={metadata!} />
         </div>
       </div>