Render markdown for control description

Signed-off-by: gearnode <bryan@frimin.fr>

apps/console/package.json

@@ -27,6 +27,7 @@
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-toast": "^1.2.6",
     "@radix-ui/react-tooltip": "^1.1.8",
+    "@tailwindcss/typography": "^0.5.16",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
@@ -38,6 +39,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet-async": "^2.0.5",
+    "react-markdown": "^10.1.0",
     "react-relay": "^18.2.0",
     "react-router": "^7.1.5",
     "relay-runtime": "^18.2.0",

apps/console/src/App.css

@@ -2,6 +2,7 @@
 @import "./styles/colors.css";
 
 @plugin 'tailwindcss-animate';
+@plugin "@tailwindcss/typography";
 
 @custom-variant dark (&:is(.dark *));
 

apps/console/src/pages/ControlOverviewPage.tsx

@@ -54,6 +54,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import ReactMarkdown from "react-markdown";
 
 import { Helmet } from "react-helmet-async";
 import type { ControlOverviewPageQuery as ControlOverviewPageQueryType } from "./__generated__/ControlOverviewPageQuery.graphql";
@@ -993,7 +994,13 @@ function ControlOverviewPageContent({
               </div>
             </div>
           </div>
-          <p className="text-gray-600 max-w-3xl">{data.control.description}</p>
+          <Card className="mt-4">
+            <CardContent className="pt-6">
+              <div className="prose prose-gray prose-sm md:prose-base text-gray-600 max-w-3xl">
+                <ReactMarkdown>{data.control.description}</ReactMarkdown>
+              </div>
+            </CardContent>
+          </Card>
         </div>
 
         <div>