From 353f21d69a4de66ea498ee4e3dffec6b1bf72602 Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Thu, 30 Apr 2026 00:36:08 +0200
Subject: [PATCH] feat(ST-1114): add shared Markdown wrapper, apply to
 task-detail and story-dialog

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/backlog/story-dialog.tsx    |  3 ++-
 components/markdown.tsx                | 21 +++++++++++++++++++++
 components/solo/task-detail-dialog.tsx | 12 ++----------
 3 files changed, 25 insertions(+), 11 deletions(-)
 create mode 100644 components/markdown.tsx

diff --git a/components/backlog/story-dialog.tsx b/components/backlog/story-dialog.tsx
index dbaac20..724f430 100644
--- a/components/backlog/story-dialog.tsx
+++ b/components/backlog/story-dialog.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { useEffect, useRef, useState, useTransition } from 'react'
+import { Markdown } from '@/components/markdown'
 import { useActionState } from 'react'
 import { useFormStatus } from 'react-dom'
 import { toast } from 'sonner'
@@ -231,7 +232,7 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
                 {story?.description && (
                   <div>
                     <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">Omschrijving</p>
-                    <p className="text-sm">{story.description}</p>
+                    <Markdown>{story.description}</Markdown>
                   </div>
                 )}
                 {story?.acceptance_criteria && (
diff --git a/components/markdown.tsx b/components/markdown.tsx
new file mode 100644
index 0000000..2b07fa8
--- /dev/null
+++ b/components/markdown.tsx
@@ -0,0 +1,21 @@
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { cn } from '@/lib/utils'
+
+interface MarkdownProps {
+  children: string
+  className?: string
+}
+
+export function Markdown({ children, className }: MarkdownProps) {
+  return (
+    <div className={cn('prose prose-sm dark:prose-invert max-w-none', className)}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        disallowedElements={['script', 'iframe']}
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
+  )
+}
diff --git a/components/solo/task-detail-dialog.tsx b/components/solo/task-detail-dialog.tsx
index 8298570..5757393 100644
--- a/components/solo/task-detail-dialog.tsx
+++ b/components/solo/task-detail-dialog.tsx
@@ -3,8 +3,7 @@
 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 { Markdown } from '@/components/markdown'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
@@ -134,14 +133,7 @@ function TaskDetailContent({ task, productId, isDemo, onClose }: TaskDetailConte
       {task.description && (
         <div>
           <p className="text-xs font-medium text-muted-foreground mb-1.5">Beschrijving</p>
-          <div className="prose prose-sm dark:prose-invert max-w-none text-foreground">
-            <ReactMarkdown
-              remarkPlugins={[remarkGfm]}
-              disallowedElements={['script', 'iframe']}
-            >
-              {task.description}
-            </ReactMarkdown>
-          </div>
+          <Markdown className="text-foreground">{task.description}</Markdown>
         </div>
       )}