From 599ca86b20d8f452f9323c9d661cec63a20c2011 Mon Sep 17 00:00:00 2001
From: Lim Ding Wen <limdingwen@gmail.com>
Date: Mon, 29 Jul 2024 09:22:19 +0800
Subject: [PATCH] Fix markdown weird paragraphs when combined with a stack

---
 site/src/app/components/DebateSpeechCard.tsx |  5 ++++-
 site/src/app/components/DebateSummary.tsx    |  4 ++--
 site/src/app/components/ShortBill.tsx        |  4 ++--
 site/src/app/components/ShortDebate.tsx      |  4 ++--
 site/src/app/components/StandardMarkdown.tsx | 11 +++++++++++
 5 files changed, 21 insertions(+), 7 deletions(-)
 create mode 100644 site/src/app/components/StandardMarkdown.tsx

diff --git a/site/src/app/components/DebateSpeechCard.tsx b/site/src/app/components/DebateSpeechCard.tsx
index 6466f35..54c7ced 100644
--- a/site/src/app/components/DebateSpeechCard.tsx
+++ b/site/src/app/components/DebateSpeechCard.tsx
@@ -4,6 +4,7 @@ import StandardCardDescription from "@/app/components/StandardCardDescription";
 import Markdown from "react-markdown";
 import React from "react";
 import { Text } from "@mantine/core";
+import StandardMarkdown from "./StandardMarkdown";
 
 function formatProcText(content: string) {
   return content
@@ -27,7 +28,9 @@ export default function DebateSummary({
         </>
       ) : (
         <Text size="sm" component="div">
-          <Markdown>{formatProcText(debateSpeech.content)}</Markdown>
+          <StandardMarkdown>
+            {formatProcText(debateSpeech.content)}
+          </StandardMarkdown>
         </Text>
       )}
     </StandardCard>
diff --git a/site/src/app/components/DebateSummary.tsx b/site/src/app/components/DebateSummary.tsx
index 7412100..aebb7e6 100644
--- a/site/src/app/components/DebateSummary.tsx
+++ b/site/src/app/components/DebateSummary.tsx
@@ -2,10 +2,10 @@ import StandardCard from "@/app/components/StandardCard";
 import StandardCardTitle from "@/app/components/StandardCardTitle";
 import StandardCardDescription from "@/app/components/StandardCardDescription";
 import { Stack } from "@mantine/core";
-import Markdown from "react-markdown";
 import SummaryAiDisclaimer from "@/app/components/SummaryAiDisclaimer";
 import SummaryNotAvailableApology from "@/app/components/SummaryNotAvailableApology";
 import React from "react";
+import StandardMarkdown from "@/app/components/StandardMarkdown";
 
 export default function DebateSummary({
   debate,
@@ -19,7 +19,7 @@ export default function DebateSummary({
       <StandardCardDescription>
         {debate.summary ? (
           <Stack>
-            <Markdown>{debate.summary}</Markdown>
+            <StandardMarkdown>{debate.summary}</StandardMarkdown>
             <SummaryAiDisclaimer />
           </Stack>
         ) : (
diff --git a/site/src/app/components/ShortBill.tsx b/site/src/app/components/ShortBill.tsx
index 45059e5..68aaf14 100644
--- a/site/src/app/components/ShortBill.tsx
+++ b/site/src/app/components/ShortBill.tsx
@@ -1,6 +1,5 @@
 import { Badge, Group, Stack } from "@mantine/core";
 import moment from "moment/moment";
-import Markdown from "react-markdown";
 import SummaryAiDisclaimer from "@/app/components/SummaryAiDisclaimer";
 import StandardCard from "@/app/components/StandardCard";
 import StandardCardTitle from "@/app/components/StandardCardTitle";
@@ -8,6 +7,7 @@ import StandardCardDescription from "@/app/components/StandardCardDescription";
 import SummaryNotAvailableApology from "@/app/components/SummaryNotAvailableApology";
 import StandardButton from "@/app/components/StandardButton";
 import BillOriginalPdfButton from "@/app/components/BillOriginalPdfButton";
+import StandardMarkdown from "./StandardMarkdown";
 
 function flipBillNo(billNo: string) {
   const [billOfYear, year] = billNo.split("/");
@@ -47,7 +47,7 @@ export default async function ShortBill({
       <StandardCardDescription>
         {bill.summary ? (
           <Stack>
-            <Markdown>{bill.summary}</Markdown>
+            <StandardMarkdown>{bill.summary}</StandardMarkdown>
             <SummaryAiDisclaimer />
           </Stack>
         ) : (
diff --git a/site/src/app/components/ShortDebate.tsx b/site/src/app/components/ShortDebate.tsx
index 3499264..664902e 100644
--- a/site/src/app/components/ShortDebate.tsx
+++ b/site/src/app/components/ShortDebate.tsx
@@ -2,12 +2,12 @@ import { Group, Stack } from "@mantine/core";
 import StandardCardTitle from "@/app/components/StandardCardTitle";
 import moment from "moment";
 import StandardCardDescription from "@/app/components/StandardCardDescription";
-import Markdown from "react-markdown";
 import SummaryAiDisclaimer from "@/app/components/SummaryAiDisclaimer";
 import SummaryNotAvailableApology from "@/app/components/SummaryNotAvailableApology";
 import StandardButton from "@/app/components/StandardButton";
 import StandardCard from "@/app/components/StandardCard";
 import StandardCardSubtitle from "@/app/components/StandardCardSubtitle";
+import StandardMarkdown from "@/app/components/StandardMarkdown";
 
 export default function ShortDebate({
   debate,
@@ -38,7 +38,7 @@ export default function ShortDebate({
       <StandardCardDescription>
         {debate.summary ? (
           <Stack>
-            <Markdown>{debate.summary}</Markdown>
+            <StandardMarkdown>{debate.summary}</StandardMarkdown>
             <SummaryAiDisclaimer />
           </Stack>
         ) : (
diff --git a/site/src/app/components/StandardMarkdown.tsx b/site/src/app/components/StandardMarkdown.tsx
new file mode 100644
index 0000000..51fb5fd
--- /dev/null
+++ b/site/src/app/components/StandardMarkdown.tsx
@@ -0,0 +1,11 @@
+import Markdown from "react-markdown";
+import { Box } from "@mantine/core";
+import React from "react";
+
+export default function StandardMarkdown({ children }: { children: string }) {
+  return (
+    <Box>
+      <Markdown>{children}</Markdown>
+    </Box>
+  );
+}