From 07eae0a9cd1e63046c946b7f86260afaeb89d80f Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Sat, 3 May 2025 12:47:24 +0200
Subject: [PATCH] [react] fix: Path string style in Xray path component

See #264
---
 packages/react/components/Highlight/index.mjs | 4 ++++
 packages/react/components/Xray/path.mjs       | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react/components/Highlight/index.mjs b/packages/react/components/Highlight/index.mjs
index 6b981942e5e..3215903d169 100644
--- a/packages/react/components/Highlight/index.mjs
+++ b/packages/react/components/Highlight/index.mjs
@@ -34,6 +34,10 @@ export const Highlight = ({
 
   const preProps = {
     className: `language-${language} hljs tw:text-base tw:lg:text-lg tw:whitespace-break-spaces tw:overflow-scroll tw:pr-4`,
+    // We have to force the background to override the ifm-pre-backround var
+    style: {
+      backgroundColor: 'var(--code-background-color)',
+    },
   }
   if (raw) preProps.dangerouslySetInnerHTML = { __html: raw }
 
diff --git a/packages/react/components/Xray/path.mjs b/packages/react/components/Xray/path.mjs
index 40f01e69f42..1c916562154 100644
--- a/packages/react/components/Xray/path.mjs
+++ b/packages/react/components/Xray/path.mjs
@@ -224,7 +224,7 @@ const PathXrayInfo = ({ path, pathName, stackName, part }) => {
         </tbody>
       </table>
       <H6>Pathstring</H6>
-      <Highlight>{path.d}</Highlight>
+      <Highlight language="SVG">{path.d}</Highlight>
     </div>
   )
 }