From ccdc01ed7b38807b19e18b73f14475cb2ecdbc22 Mon Sep 17 00:00:00 2001
From: Hugo Pereira Brito <101209179+HugoPBrito@users.noreply.github.com>
Date: Wed, 13 May 2026 10:31:48 +0100
Subject: [PATCH] fix(ui): render inline code without literal backticks in
 finding drawer (#11142)

---
 ui/CHANGELOG.md                               |  9 ++++-
 .../findings/markdown-container.test.tsx      | 35 +++++++++++++++++++
 ui/components/findings/markdown-container.tsx |  2 +-
 3 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 ui/components/findings/markdown-container.test.tsx

diff --git a/ui/CHANGELOG.md b/ui/CHANGELOG.md
index c622279475..e3daada4d5 100644
--- a/ui/CHANGELOG.md
+++ b/ui/CHANGELOG.md
@@ -16,6 +16,14 @@ All notable changes to the **Prowler UI** are documented in this file.
 
 ---
 
+## [1.26.2] (Prowler 5.26.2)
+
+### 🐞 Fixed
+
+- Finding drawer no longer renders literal backticks around inline code in Risk, Description and Remediation sections [(#11142)](https://github.com/prowler-cloud/prowler/pull/11142)
+
+---
+
 ## [1.26.1] (Prowler 5.26.1)
 
 ### 🐞 Fixed
@@ -23,7 +31,6 @@ All notable changes to the **Prowler UI** are documented in this file.
 - Role form Cancel buttons now return to Roles [(#11125)](https://github.com/prowler-cloud/prowler/pull/11125)
 - Shared select dropdowns stay constrained and scrollable inside modals [(#11125)](https://github.com/prowler-cloud/prowler/pull/11125)
 
-
 ---
 
 ## [1.26.0] (Prowler v5.26.0)
diff --git a/ui/components/findings/markdown-container.test.tsx b/ui/components/findings/markdown-container.test.tsx
new file mode 100644
index 0000000000..663720f916
--- /dev/null
+++ b/ui/components/findings/markdown-container.test.tsx
@@ -0,0 +1,35 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { MarkdownContainer } from "./markdown-container";
+
+describe("MarkdownContainer", () => {
+  it("renders bold and inline code as semantic elements", () => {
+    render(
+      <MarkdownContainer>
+        {"**Bedrock API keys** are evaluated, configured to `never expire`."}
+      </MarkdownContainer>,
+    );
+
+    const code = screen.getByText("never expire");
+    expect(code.tagName).toBe("CODE");
+    expect(screen.getByText("Bedrock API keys").tagName).toBe("STRONG");
+  });
+
+  it("neutralizes the @tailwindcss/typography backtick pseudo-elements on inline code", () => {
+    const { container } = render(
+      <MarkdownContainer>{"text `code` text"}</MarkdownContainer>,
+    );
+
+    const wrapper = container.firstElementChild;
+    expect(wrapper).not.toBeNull();
+    const className = wrapper?.className ?? "";
+
+    // The prose plugin from @tailwindcss/typography adds ::before/::after
+    // pseudo-elements with literal backticks on every <code> tag. Without
+    // these overrides the drawer renders `never expire` with visible
+    // backticks, which is the bug PROWLER-1729 fixes.
+    expect(className).toMatch(/prose-code:before:content-none/);
+    expect(className).toMatch(/prose-code:after:content-none/);
+  });
+});
diff --git a/ui/components/findings/markdown-container.tsx b/ui/components/findings/markdown-container.tsx
index 5756a8ad5c..f586000fa5 100644
--- a/ui/components/findings/markdown-container.tsx
+++ b/ui/components/findings/markdown-container.tsx
@@ -5,7 +5,7 @@ interface MarkdownContainerProps {
 }
 
 export const MarkdownContainer = ({ children }: MarkdownContainerProps) => (
-  <div className="prose prose-sm dark:prose-invert max-w-none break-words whitespace-normal">
+  <div className="prose prose-sm dark:prose-invert prose-code:before:content-none prose-code:after:content-none max-w-none break-words whitespace-normal">
     <ReactMarkdown>{children}</ReactMarkdown>
   </div>
 );