fix: codderabbitai comment

Author: kemuru

web/src/components/Popup/MiniGuides/DisputeResolver/index.tsx

@@ -20,7 +20,7 @@ const leftPageContents = [
     title: "Parameters",
     paragraphs: [
       "Define some parameters:",
-      "• Choose a court to arbitrate the case.<br/>• Select a category.<br/>• Select the number of jurors.",
+      "• Choose a court to arbitrate the case.\n• Select a category.\n• Select the number of jurors.",
       "The more jurors you select, higher the arbitration cost will be. By default we use 3 jurors for the first " +
         "round. The arbitration cost is the value used to pay the jurors for their work.",
     ],

web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx

@@ -52,6 +52,15 @@ const StyledParagraph = styled.p`
 
 const extractGuideName = (linkText) => linkText.split(". ")[1];
 
+const processNewLineInParagraph = (paragraph: string) => {
+  return paragraph.split("\n").map((text, index) => (
+    <React.Fragment key={index}>
+      {index > 0 && <br />}
+      {text}
+    </React.Fragment>
+  ));
+};
+
 const LeftContent: React.FC<{
   currentPage: number;
   leftPageContents: {
@@ -68,7 +77,7 @@ const LeftContent: React.FC<{
       <Title>{title}</Title>
       <ParagraphsContainer>
         {paragraphs.map((paragraph, index) => (
-          <StyledParagraph key={index} dangerouslySetInnerHTML={{ __html: paragraph }} />
+          <StyledParagraph key={index}>{processNewLineInParagraph(paragraph)}</StyledParagraph>
         ))}
       </ParagraphsContainer>
       {links && links.length > 0 && toggleSubMiniGuide ? (