Fix markdown weird paragraphs when combined with a stack

limdingwen · Jul 29, 2024 · 599ca86 · 599ca86
1 parent 0fd15dc
commit 599ca86
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 7 deletions.
diff --git 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
@@ -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
@@ -1,13 +1,13 @@
 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";
 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
@@ -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
@@ -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>
+  );
+}