refactor: simplify task description handling and improve modal layout (#750)

- Updated ProjectStore to use the full task description for the modal view instead of extracting a summary.
- Enhanced TaskDetailModal layout to prevent overflow and ensure proper display of task descriptions.
- Adjusted TaskMetadata component styling for better readability and responsiveness.

These changes improve the user experience by providing complete task descriptions and ensuring that content is displayed correctly across different screen sizes.

apps/frontend/src/main/project-store.ts

@@ -399,27 +399,8 @@ export class ProjectStore {
               const reqContent = readFileSync(requirementsPath, 'utf-8');
               const requirements = JSON.parse(reqContent);
               if (requirements.task_description) {
-                // Extract a clean summary from task_description (first line or first ~200 chars)
-                const taskDesc = requirements.task_description;
-                const firstLine = taskDesc.split('\n')[0].trim();
-                // If the first line is a title like "Investigate GitHub Issue #36", use the next meaningful line
-                if (firstLine.toLowerCase().startsWith('investigate') && taskDesc.includes('\n\n')) {
-                  const sections = taskDesc.split('\n\n');
-                  // Find the first paragraph that's not a title
-                  for (const section of sections) {
-                    const trimmed = section.trim();
-                    // Skip headers and short lines
-                    if (trimmed.startsWith('#') || trimmed.length < 20) continue;
-                    // Skip the "Please analyze" instruction at the end
-                    if (trimmed.startsWith('Please analyze')) continue;
-                    description = trimmed.substring(0, 200).split('\n')[0];
-                    break;
-                  }
-                }
-                // If still no description, use a shortened version of task_description
-                if (!description) {
-                  description = firstLine.substring(0, 150);
-                }
+                // Use the full task description for the modal view
+                description = requirements.task_description;
               }
             } catch {
               // Ignore parse errors

apps/frontend/src/renderer/components/task-detail/TaskDetailModal.tsx

@@ -393,7 +393,7 @@ function TaskDetailModalContent({ open, task, onOpenChange, onSwitchToTerminals,
                 {/* Overview Tab */}
                 <TabsContent value="overview" className="flex-1 min-h-0 overflow-hidden mt-0">
                   <ScrollArea className="h-full">
-                    <div className="p-5 space-y-5">
+                    <div className="p-5 space-y-5 overflow-x-hidden max-w-full">
                       {/* Metadata */}
                       <TaskMetadata task={task} />
 

apps/frontend/src/renderer/components/task-detail/TaskMetadata.tsx

@@ -138,10 +138,15 @@ export function TaskMetadata({ task }: TaskMetadataProps) {
 
       {/* Description - Primary Content */}
       {task.description && (
-        <div className="prose prose-sm prose-invert max-w-none prose-p:text-foreground/90 prose-p:leading-relaxed prose-headings:text-foreground prose-strong:text-foreground prose-li:text-foreground/90">
-          <ReactMarkdown remarkPlugins={[remarkGfm]}>
-            {task.description}
-          </ReactMarkdown>
+        <div className="bg-muted/30 rounded-lg px-4 py-3 border border-border/50 overflow-hidden max-w-full">
+          <div 
+            className="prose prose-sm prose-invert max-w-none overflow-hidden prose-p:text-foreground/90 prose-p:leading-relaxed prose-headings:text-foreground prose-strong:text-foreground prose-li:text-foreground/90 prose-ul:my-2 prose-li:my-0.5 prose-a:break-all prose-pre:overflow-x-auto prose-img:max-w-full [&_img]:!max-w-full [&_img]:h-auto [&_code]:break-all [&_code]:whitespace-pre-wrap [&_*]:max-w-full"
+            style={{ wordBreak: 'break-word', overflowWrap: 'anywhere' }}
+          >
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+              {task.description}
+            </ReactMarkdown>
+          </div>
         </div>
       )}