max height for proposal details

src/components/chat/ChatInput.tsx

@@ -345,6 +345,19 @@ function ChatInputActions({
   const otherFilesChanged =
     proposal.filesChanged?.filter((f: FileChange) => !f.isServerFunction) ?? [];
 
+  function formatTitle({
+    title,
+    isDetailsVisible,
+  }: {
+    title: string;
+    isDetailsVisible: boolean;
+  }) {
+    if (isDetailsVisible) {
+      return title;
+    }
+    return title.slice(0, 60) + "...";
+  }
+
   return (
     <div className="border-b border-border">
       <div className="p-2">
@@ -360,7 +373,9 @@ function ChatInputActions({
               ) : (
                 <ChevronDown size={16} className="mr-1 flex-shrink-0" />
               )}
-              <span className="font-medium">{proposal.title}</span>
+              <span className="font-medium">
+                {formatTitle({ title: proposal.title, isDetailsVisible })}
+              </span>
             </div>
             <div className="text-xs text-muted-foreground ml-6">
               <ProposalSummary
@@ -414,6 +429,7 @@ function ChatInputActions({
         </div>
       </div>
 
+      <div className="overflow-y-auto max-h-[calc(100vh-300px)]">
         {isDetailsVisible && (
           <div className="p-3 border-t border-border bg-muted/50 text-sm">
             {!!proposal.securityRisks.length && (
@@ -488,7 +504,10 @@ function ChatInputActions({
                   {serverFunctions.map((file: FileChange, index: number) => (
                     <li key={index} className="flex items-center space-x-2">
                       {getIconForFileChange(file)}
-                    <span title={file.path} className="truncate cursor-default">
+                      <span
+                        title={file.path}
+                        className="truncate cursor-default"
+                      >
                         {file.name}
                       </span>
                       <span className="text-muted-foreground text-xs truncate">
@@ -507,7 +526,10 @@ function ChatInputActions({
                   {otherFilesChanged.map((file: FileChange, index: number) => (
                     <li key={index} className="flex items-center space-x-2">
                       {getIconForFileChange(file)}
-                    <span title={file.path} className="truncate cursor-default">
+                      <span
+                        title={file.path}
+                        className="truncate cursor-default"
+                      >
                         {file.name}
                       </span>
                       <span className="text-muted-foreground text-xs truncate">
@@ -521,6 +543,7 @@ function ChatInputActions({
           </div>
         )}
       </div>
+    </div>
   );
 }