Suggested code when renaming a label is not visible

Author: lumburovskalina

src/components/projects/projectId/settings/labeling-tasks/RenameLabelModal.tsx

@@ -172,16 +172,10 @@ export default function RenameLabelModal() {
                                             <span className="text-sm">{warning.new}</span>
                                         </div></div>}
                                     {warning.key == 'HEURISTIC' && <div className="flex flex-col gap-y-2">
-                                        <span className="text-sm">
-                                            <Tooltip content={TOOLTIPS_DICT.PROJECT_SETTINGS.LABELING_TASK.OPEN_HEURISTICS} placement="right" color="invert">
-                                                <a href={'../heuristics/' + warning.id} target="_blank"
-                                                    className="cursor-pointer underline font-medium">
-                                                    Current source code:</a>
-                                            </Tooltip>
-                                        </span>
-                                        <Highlight text={warning.oldParsed} searchFor={warning.old_highlighting} />
-                                        <span className="text-sm font-medium text-left">Suggested changes:</span>
-                                        <Highlight text={warning.newParsed} searchFor={warning.new_highlighting} />
+                                        <span className="text-sm font-medium underline text-left">Current source code:</span>
+                                        <Highlight text={warning.oldParsed} searchFor={warning.oldHighlighting} />
+                                        <span className="text-sm font-medium underline text-left">Suggested changes:</span>
+                                        <Highlight text={warning.newParsed} searchFor={warning.newHighlighting} />
                                     </div>}
                                     <KernButton
                                         text="Change"

src/components/shared/highlight/Highlight.tsx

@@ -45,9 +45,9 @@ export default function Highlight(props: any) {
         setParts(extendArrayElementsByUniqueId(rebuildText(props.text, finalRegEx)));
     }, [finalRegEx, props.text]);
 
-    return (<span>
+    return (<pre className="text-left text-sm">
         {parts && parts.map((part, index) => (<span key={part.id} className={`${part.isMatch ? highlightClass : null} ${addClassString}`}>
             {part.text}
         </span>))}
-    </span>)
+    </pre>)
 }