From 85c1b8585264134eb192fc025cb763967823ea1a Mon Sep 17 00:00:00 2001
From: Prowler Bot <bot@prowler.com>
Date: Wed, 13 May 2026 11:47:13 +0200
Subject: [PATCH] fix(ui): render inline code without literal backticks in
 finding drawer (#11155)

Co-authored-by: Hugo Pereira Brito <101209179+HugoPBrito@users.noreply.github.com>
---
 ui/CHANGELOG.md                               |  8 +++++
 .../findings/markdown-container.test.tsx      | 35 +++++++++++++++++++
 ui/components/findings/markdown-container.tsx |  2 +-
 3 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 ui/components/findings/markdown-container.test.tsx

diff --git a/ui/CHANGELOG.md b/ui/CHANGELOG.md
index 89970264c0..855555ceb9 100644
--- a/ui/CHANGELOG.md
+++ b/ui/CHANGELOG.md
@@ -2,6 +2,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
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>
 );