Unlimited height on the share page (#160)

apps/web/src/app/(authenticated)/usage/Messages.tsx

@@ -8,6 +8,7 @@ import { useAutoScroll } from '@/hooks/useAutoScroll';
 
 type MessagesProps = {
   messages: Message[];
+  maxHeight?: string;
 };
 
 type SuggestionItem = string | { answer: string };
@@ -34,7 +35,7 @@ const parseQuestionData = (text: string): QuestionData | null => {
   return null;
 };
 
-export const Messages = ({ messages }: MessagesProps) => {
+export const Messages = ({ messages, maxHeight }: MessagesProps) => {
   const { containerRef, scrollToBottom, autoScrollToBottom, userHasScrolled } =
     useAutoScroll<HTMLDivElement>({
       enabled: true,
@@ -73,7 +74,7 @@ export const Messages = ({ messages }: MessagesProps) => {
       {/* Scrollable messages container */}
       <div
         ref={containerRef}
-        className="max-h-[600px] overflow-y-auto space-y-6 pr-2"
+        className={`space-y-6 pr-2 overflow-y-auto ${maxHeight || ''}`}
         style={{
           scrollbarWidth: 'thin',
           scrollbarColor: 'hsl(var(--border)) transparent',

apps/web/src/components/task-sharing/SharedTaskView.tsx

@@ -51,6 +51,7 @@ export const SharedTaskView = ({
       sharedBy={sharedBy}
       sharedAt={sharedAt}
       showSharedInfo={true}
+      limitMessagesHeight={false}
     />
   );
 };

apps/web/src/components/task-sharing/TaskDetails.tsx

@@ -22,6 +22,7 @@ type TaskDetailsProps = {
   sharedAt?: Date;
   showSharedInfo?: boolean;
   headerActions?: React.ReactNode;
+  limitMessagesHeight?: boolean;
 };
 
 export const TaskDetails = ({
@@ -31,6 +32,7 @@ export const TaskDetails = ({
   sharedAt,
   showSharedInfo = false,
   headerActions,
+  limitMessagesHeight = true,
 }: TaskDetailsProps) => {
   const taskTitle = task.title || generateFallbackTitle(task);
 
@@ -152,7 +154,10 @@ export const TaskDetails = ({
             <CardTitle>Conversation</CardTitle>
           </CardHeader>
           <CardContent>
-            <Messages messages={messages} />
+            <Messages
+              messages={messages}
+              maxHeight={limitMessagesHeight ? 'max-h-[600px]' : undefined}
+            />
           </CardContent>
         </Card>
       ) : (