From e3d72d648edc05e3fcb519cfcfd2f862677513ac Mon Sep 17 00:00:00 2001
From: Andy <119136210+AndyMik90@users.noreply.github.com>
Date: Tue, 6 Jan 2026 23:50:37 +0100
Subject: [PATCH] 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       | 23 ++-----------------
 .../task-detail/TaskDetailModal.tsx           |  2 +-
 .../components/task-detail/TaskMetadata.tsx   | 13 +++++++----
 3 files changed, 12 insertions(+), 26 deletions(-)

diff --git a/apps/frontend/src/main/project-store.ts b/apps/frontend/src/main/project-store.ts
index dab55374..dedc374f 100644
--- a/apps/frontend/src/main/project-store.ts
+++ b/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
diff --git a/apps/frontend/src/renderer/components/task-detail/TaskDetailModal.tsx b/apps/frontend/src/renderer/components/task-detail/TaskDetailModal.tsx
index f67f6282..c70395bb 100644
--- a/apps/frontend/src/renderer/components/task-detail/TaskDetailModal.tsx
+++ b/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} />
 
diff --git a/apps/frontend/src/renderer/components/task-detail/TaskMetadata.tsx b/apps/frontend/src/renderer/components/task-detail/TaskMetadata.tsx
index 2deab047..34e5180d 100644
--- a/apps/frontend/src/renderer/components/task-detail/TaskMetadata.tsx
+++ b/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>
       )}