chore: visual improvements

limits height of inputs which is helpful in documents with many parameters makes more space for log metadata and adds some viewport breakpoints to increase its width when appropiate – also internal scroll in case of looong strings.
latitude-dev · Oct 1, 2024 · c465ee5 · c465ee5
1 parent 4ab4d71
commit c465ee5
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 20 deletions.
diff --git a/...mmitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/index.tsx b/...mmitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/index.tsx
@@ -65,7 +65,7 @@ export default function Playground({
         )}
       </Header>
       <div className='flex flex-col gap-6 h-full relative'>
-        <div className='flex flex-col gap-3'>
+        <div className='flex flex-col gap-3 max-h-[35vh] overflow-y-auto custom-scrollbar'>
           <Text.H6M>Inputs</Text.H6M>
           {Object.keys(inputs).length > 0 ? (
             Object.entries(inputs).map(([param, value], idx) => (

diff --git a/...Id]/versions/[commitUuid]/documents/[documentUuid]/_components/MetadataInfoTabs/index.tsx b/...Id]/versions/[commitUuid]/documents/[documentUuid]/_components/MetadataInfoTabs/index.tsx
@@ -35,7 +35,7 @@ export function MetadataInfoTabs({
       </div>
       <div className='my-5 px-4 flex flex-col gap-y-5 relative w-full'>
         {beforeTabs}
-        <div className='flex flex-col gap-4 w-full'>
+        <div className='flex flex-col gap-4 w-full overflow-x-auto'>
           {children({ selectedTab })}
         </div>
       </div>

diff --git a/...]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/index.tsx b/...]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/index.tsx
@@ -85,7 +85,7 @@ export function EvaluationResultInfo({
   return (
     <>
       <MetadataInfoTabs
-        className='w-80'
+        className='w-full'
         beforeTabs={
           <div>
             <Text.H6 color='foregroundMuted'>

diff --git a/...cuments/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/index.tsx b/...cuments/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/index.tsx
@@ -83,7 +83,7 @@ export function EvaluationResults({
         documentUuid={document.documentUuid}
         evaluationId={evaluation.id}
       />
-      <div className='relative flex flex-row w-full gap-4'>
+      <div className='relative flex flex-row w-full gap-4 overflow-x-auto min-w-[1024px]'>
         <div className='flex-1'>
           {evaluationResults.length === 0 && (
             <TableBlankSlate
@@ -117,12 +117,14 @@ export function EvaluationResults({
           )}
         </div>
         {selectedResult && (
-          <EvaluationResultInfo
-            key={selectedResult.id}
-            evaluation={evaluation}
-            evaluationResult={selectedResult}
-            providerLog={providerLog}
-          />
+          <div className='lg:w-1/2 2xl:w-1/3'>
+            <EvaluationResultInfo
+              key={selectedResult.id}
+              evaluation={evaluation}
+              evaluationResult={selectedResult}
+              providerLog={providerLog}
+            />
+          </div>
         )}
       </div>
     </div>

diff --git a/...[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogsTable.tsx b/...[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogsTable.tsx
@@ -76,7 +76,7 @@ export const DocumentLogsTable = ({
               <Text.H4 noWrap>{relativeTime(documentLog.createdAt)}</Text.H4>
             </TableCell>
             <TableCell>
-              <div className='flex flex-row gap-2 items-center'>
+              <div className='flex flex-row gap-2 items-center min-w-0 max-w-xs'>
                 <Badge
                   variant={documentLog.commit.version ? 'accent' : 'muted'}
                   shape='square'
@@ -87,7 +87,9 @@ export const DocumentLogsTable = ({
                       : 'Draft'}
                   </Text.H6>
                 </Badge>
-                <Text.H5>{documentLog.commit.title}</Text.H5>
+                <Text.H5 noWrap ellipsis>
+                  {documentLog.commit.title}
+                </Text.H5>
               </div>
             </TableCell>
             <TableCell>

diff --git a/...d]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/index.tsx b/...d]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/index.tsx
@@ -24,8 +24,8 @@ export function DocumentLogs({
   })
 
   return (
-    <div className='flex flex-row w-full h-full gap-4'>
-      <div className='flex flex-col flex-grow min-w-0 h-full gap-y-4'>
+    <div className='flex flex-row w-full h-full gap-4 min-w-[1024px] overflow-x-auto'>
+      <div className='flex flex-col flex-grow h-full gap-y-4 min-w-0 lg:w-1/2 2xl:w-2/3'>
         <DocumentLogsTable
           documentLogs={documentLogs}
           selectedLog={selectedLog}
@@ -34,11 +34,12 @@ export function DocumentLogs({
         />
       </div>
       {selectedLog && (
-        <DocumentLogInfo
-          className='w-80'
-          documentLog={selectedLog}
-          providerLogs={providerLogs}
-        />
+        <div className='lg:w-1/2 2xl:w-1/3'>
+          <DocumentLogInfo
+            documentLog={selectedLog}
+            providerLogs={providerLogs}
+          />
+        </div>
       )}
     </div>
   )

diff --git a/...rivate)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/page.tsx b/...rivate)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/page.tsx
@@ -40,7 +40,7 @@ export default async function DocumentPage({
     }).$dynamic(),
   })
   return (
-    <div className='flex flex-col w-full h-full overflow-hidden p-6 gap-2 min-w-0'>
+    <div className='flex flex-col w-full h-full overflow-x-auto p-6 gap-2 min-w-0'>
       <TableWithHeader
         title='Logs'
         table={