From 9c14c16448d7a50dc13dc9b4ece5712e70294596 Mon Sep 17 00:00:00 2001
From: HugoPBrito <hugopbrit@gmail.com>
Date: Thu, 28 Aug 2025 16:04:12 +0200
Subject: [PATCH] chore: render attributes as markdown

---
 .../findings/table/finding-detail.tsx         | 39 ++++++++++++-------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/ui/components/findings/table/finding-detail.tsx b/ui/components/findings/table/finding-detail.tsx
index 00c88e285f..9dbb5a3322 100644
--- a/ui/components/findings/table/finding-detail.tsx
+++ b/ui/components/findings/table/finding-detail.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Snippet } from "@nextui-org/react";
+import ReactMarkdown from "react-markdown";
 
 import { CodeSnippet } from "@/components/ui/code-snippet/code-snippet";
 import { CustomSection } from "@/components/ui/custom";
@@ -122,15 +123,21 @@ export const FindingDetail = ({
               hideCopyButton
               hideSymbol
             >
-              <p className="whitespace-pre-line">
-                {attributes.check_metadata.risk}
-              </p>
+              {/* eslint-disable-next-line */}
+              <div className="prose prose-sm max-w-none dark:prose-invert">
+                <ReactMarkdown>{attributes.check_metadata.risk}</ReactMarkdown>
+              </div>
             </Snippet>
           </InfoField>
         )}
 
         <InfoField label="Description">
-          {renderValue(attributes.check_metadata.description)}
+          {/* eslint-disable-next-line */}
+          <div className="prose prose-sm max-w-none dark:prose-invert">
+            <ReactMarkdown>
+              {attributes.check_metadata.description}
+            </ReactMarkdown>
+          </div>
         </InfoField>
 
         <InfoField label="Status Extended">
@@ -147,9 +154,15 @@ export const FindingDetail = ({
             {attributes.check_metadata.remediation.recommendation.text && (
               <InfoField label="Recommendation">
                 <div className="flex flex-col gap-2">
-                  <p>
-                    {attributes.check_metadata.remediation.recommendation.text}
-                  </p>
+                  {/* eslint-disable-next-line */}
+                  <div className="prose prose-sm max-w-none dark:prose-invert">
+                    <ReactMarkdown>
+                      {
+                        attributes.check_metadata.remediation.recommendation
+                          .text
+                      }
+                    </ReactMarkdown>
+                  </div>
                   {attributes.check_metadata.remediation.recommendation.url && (
                     <CustomLink
                       href={
@@ -178,12 +191,12 @@ export const FindingDetail = ({
             {/* Additional Resources section */}
             {attributes.check_metadata.remediation.code.other && (
               <InfoField label="Additional Resources">
-                <CustomLink
-                  href={attributes.check_metadata.remediation.code.other}
-                  size="sm"
-                >
-                  View documentation
-                </CustomLink>
+                {/* eslint-disable-next-line */}
+                <div className="prose prose-sm max-w-none dark:prose-invert">
+                  <ReactMarkdown>
+                    {attributes.check_metadata.remediation.code.other}
+                  </ReactMarkdown>
+                </div>
               </InfoField>
             )}
           </div>