fix(ui): render inline code without literal backticks in finding drawer (#11142)

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)

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/);
+  });
+});

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>
 );