From 1b09f85e19567ab40d2d64944e4b57303d1a0e4a Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Wed, 29 Apr 2026 23:54:26 +0200
Subject: [PATCH] feat(ST-1112): render description as markdown in
 task-detail-dialog

Solo task detail now renders description via react-markdown +
remark-gfm with prose styling. Sanitizes script/iframe elements.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/solo/task-detail-dialog.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/components/solo/task-detail-dialog.tsx b/components/solo/task-detail-dialog.tsx
index d9b6db1..8298570 100644
--- a/components/solo/task-detail-dialog.tsx
+++ b/components/solo/task-detail-dialog.tsx
@@ -3,6 +3,8 @@
 import { useRef, useState, useTransition } from 'react'
 import Link from 'next/link'
 import { toast } from 'sonner'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
@@ -132,7 +134,14 @@ function TaskDetailContent({ task, productId, isDemo, onClose }: TaskDetailConte
       {task.description && (
         <div>
           <p className="text-xs font-medium text-muted-foreground mb-1.5">Beschrijving</p>
-          <p className="text-sm text-foreground whitespace-pre-wrap">{task.description}</p>
+          <div className="prose prose-sm dark:prose-invert max-w-none text-foreground">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              disallowedElements={['script', 'iframe']}
+            >
+              {task.description}
+            </ReactMarkdown>
+          </div>
         </div>
       )}