diff --git a/app/(dashboard)/plans/[id]/plan-description-card.tsx b/app/(dashboard)/plans/[id]/plan-description-card.tsx index 3a6dc32..2098816 100644 --- a/app/(dashboard)/plans/[id]/plan-description-card.tsx +++ b/app/(dashboard)/plans/[id]/plan-description-card.tsx @@ -1,19 +1,21 @@ 'use client' import { useEffect, useRef, useState } from 'react' +import ReactMarkdown from 'react-markdown' +import remarkGfm from 'remark-gfm' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Button } from '@/components/ui/button' import { AlignLeft, ChevronDown, ChevronUp } from 'lucide-react' import { cn } from '@/lib/utils' -/** Long-form plan description in its own card, clamped to ~5 lines with an expander. */ +/** Long-form plan description in its own card, collapsed to a preview with an expander. */ export function PlanDescriptionCard({ description }: { description: string }) { const [expanded, setExpanded] = useState(false) const [clamped, setClamped] = useState(false) - const textRef = useRef(null) + const contentRef = useRef(null) useEffect(() => { - const el = textRef.current + const el = contentRef.current if (el) setClamped(el.scrollHeight > el.clientHeight + 1) }, [description]) @@ -26,15 +28,17 @@ export function PlanDescriptionCard({ description }: { description: string }) { -

- {description} -

+ {description} + {(clamped || expanded) && (