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

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}

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

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 {