From afa148572deaa9e67ad7091ab1bfb9ddd1d9385e Mon Sep 17 00:00:00 2001
From: Gerard <clos.gerard@gmail.com>
Date: Sun, 29 Sep 2024 08:23:25 +0200
Subject: [PATCH] chore: evaluation modal style fixes (#305)

---
 .../ConnectEvaluationModal/Editor/index.tsx        |  8 +++++---
 .../ConnectEvaluationModal/List/index.tsx          |  2 +-
 .../src/ds/molecules/SelectableCard/index.tsx      | 14 ++++----------
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/dashboard/connect/_components/ConnectEvaluationModal/Editor/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/dashboard/connect/_components/ConnectEvaluationModal/Editor/index.tsx
index cda28e02e..87750a066 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/dashboard/connect/_components/ConnectEvaluationModal/Editor/index.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/dashboard/connect/_components/ConnectEvaluationModal/Editor/index.tsx
@@ -3,7 +3,7 @@ import React, { ReactNode, useEffect, useState } from 'react'
 import { Text } from '@latitude-data/web-ui'
 
 const className =
-  'flex-1 min-h-[450px] min-w-0 rounded-lg border bg-muted flex flex-col'
+  'flex-1 min-h-[450px] max-h-[580px] min-w-0 rounded-lg border bg-muted flex flex-col'
 
 interface TabsProps {
   children: ReactNode
@@ -81,7 +81,7 @@ export default function EvaluationEditor({
     return (
       <div className={className}>
         <textarea
-          className='w-full h-full p-4 bg-muted text-foregound text-sm resize-none'
+          className='w-full h-full p-4 bg-muted text-foregound text-sm resize-none overflow-x-auto '
           value={
             items[0]!.type === 'evaluation'
               ? items[0]!.data.metadata.prompt
@@ -89,6 +89,7 @@ export default function EvaluationEditor({
           }
           readOnly
           disabled
+          wrap='off'
         />
       </div>
     )
@@ -117,7 +118,7 @@ export default function EvaluationEditor({
               activeTab === item.uuid && (
                 <textarea
                   key={item.uuid}
-                  className='w-full h-full p-4 bg-muted text-foregound text-sm resize-none'
+                  className='w-full h-full p-4 bg-muted text-foregound text-sm resize-none overflow-x-auto '
                   value={
                     item.type === 'evaluation'
                       ? item.data.metadata.prompt
@@ -125,6 +126,7 @@ export default function EvaluationEditor({
                   }
                   readOnly
                   disabled
+                  wrap='off'
                 />
               ),
           )}
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/dashboard/connect/_components/ConnectEvaluationModal/List/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/dashboard/connect/_components/ConnectEvaluationModal/List/index.tsx
index e7b4d2530..91507bd4d 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/dashboard/connect/_components/ConnectEvaluationModal/List/index.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/dashboard/connect/_components/ConnectEvaluationModal/List/index.tsx
@@ -23,7 +23,7 @@ export default function EvaluationList({
   onSearchChange,
 }: EvaluationListProps) {
   return (
-    <div className='w-1/3'>
+    <div className='w-1/2'>
       <Input
         type='text'
         placeholder='Search evaluations and templates...'
diff --git a/packages/web-ui/src/ds/molecules/SelectableCard/index.tsx b/packages/web-ui/src/ds/molecules/SelectableCard/index.tsx
index c84f8640f..29f67cd7b 100644
--- a/packages/web-ui/src/ds/molecules/SelectableCard/index.tsx
+++ b/packages/web-ui/src/ds/molecules/SelectableCard/index.tsx
@@ -30,18 +30,12 @@ export function SelectableCard({
         </div>
       )}
       <div className='w-full flex flex-col gap-1'>
-        <Text.H5M ellipsis noWrap color={selected ? 'primary' : 'foreground'}>
-          {title}
+        <Text.H5M color={selected ? 'primary' : 'foreground'}>
+          {title.length > 30 ? `${title.slice(0, 30)}...` : title}
         </Text.H5M>
         {description.length > 0 && (
-          <Text.H6
-            ellipsis
-            noWrap
-            color={selected ? 'accentForeground' : 'foregroundMuted'}
-          >
-            {description.length > 45
-              ? `${description.slice(0, 42)}...`
-              : description}
+          <Text.H6 color={selected ? 'accentForeground' : 'foregroundMuted'}>
+            {description}
           </Text.H6>
         )}
       </div>