From e15730173f717c3e41e38723f9301494feb9d79b Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Tue, 17 Dec 2024 14:10:42 -0300
Subject: [PATCH] fix: update font size of prompt when validated (#5214)

Fixed prompt after validation not showing up correctly

Co-authored-by: Eric Hare <ericrhare@gmail.com>
---
 .../src/components/common/sanitizedHTMLWrapper/index.tsx       | 3 ++-
 src/frontend/src/modals/promptModal/index.tsx                  | 2 +-
 .../src/modals/promptModal/utils/var-highlight-html.tsx        | 2 +-
 src/frontend/src/style/applies.css                             | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/components/common/sanitizedHTMLWrapper/index.tsx b/src/frontend/src/components/common/sanitizedHTMLWrapper/index.tsx
index 4ec8e88b8..5271627f7 100644
--- a/src/frontend/src/components/common/sanitizedHTMLWrapper/index.tsx
+++ b/src/frontend/src/components/common/sanitizedHTMLWrapper/index.tsx
@@ -1,3 +1,4 @@
+import { cn } from "@/utils/utils";
 import DOMPurify from "dompurify";
 import { forwardRef } from "react";
 import { SanitizedHTMLWrapperType } from "../../../types/components";
@@ -15,7 +16,7 @@ const SanitizedHTMLWrapper = forwardRef<
       dangerouslySetInnerHTML={{ __html: sanitizedHTML }}
       suppressContentEditableWarning={suppressWarning}
       {...props}
-      className="m-1 w-full"
+      className={cn("m-1 w-full", props.className)}
     />
   );
 });
diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx
index 9c761f9c4..184d594a3 100644
--- a/src/frontend/src/modals/promptModal/index.tsx
+++ b/src/frontend/src/modals/promptModal/index.tsx
@@ -257,7 +257,7 @@ export default function PromptModal({
           ) : (
             <SanitizedHTMLWrapper
               ref={previewRef}
-              className={getClassByNumberLength() + " bg-muted"}
+              className={getClassByNumberLength() + " m-0"}
               onClick={handlePreviewClick}
               content={coloredContent}
               suppressWarning={true}
diff --git a/src/frontend/src/modals/promptModal/utils/var-highlight-html.tsx b/src/frontend/src/modals/promptModal/utils/var-highlight-html.tsx
index d88be4965..6a3b27e58 100644
--- a/src/frontend/src/modals/promptModal/utils/var-highlight-html.tsx
+++ b/src/frontend/src/modals/promptModal/utils/var-highlight-html.tsx
@@ -1,6 +1,6 @@
 import { IVarHighlightType } from "../../../types/components";
 
 export default function varHighlightHTML({ name }: IVarHighlightType): string {
-  const html = `<span class="font-semibold chat-message-highlight">{${name}}</span>`;
+  const html = `<span class="chat-message-highlight">{${name}}</span>`;
   return html;
 }
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 72f388a17..23a35adc3 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -1111,7 +1111,7 @@
   }
 
   .chat-message-highlight {
-    @apply rounded-md bg-indigo-100 px-0.5 dark:bg-indigo-900;
+    @apply rounded-md bg-indigo-100 px-0 font-semibold dark:bg-indigo-900;
   }
 
   .field-invalid {