fix: heights (#318)

We had some shenanigans with heights in documents with lots of inputs. This fixes it.
latitude-dev · Oct 1, 2024 · 4bdc39e · 4bdc39e
1 parent 8fdf13a
commit 4bdc39e
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 33 deletions.
diff --git a/...luation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/index.tsx b/...luation)/[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/...ations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/index.tsx b/...ations/(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/...mmitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/index.tsx b/...mmitUuid]/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/...ersions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/index.tsx b/...ersions/[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>