fix(lib-react-components): inconsistent text sizing in markdown (#6362)

Style markdown tables and lists with a font size of 1rem, so that they match the default paragraph size.
zooniverse · Oct 17, 2024 · 0fe1237 · 0fe1237
1 parent 06eb381
commit 0fe1237
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/packages/lib-react-components/CHANGELOG.md b/packages/lib-react-components/CHANGELOG.md
@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - refactor `AnimatedNumber` to fix a bug where deferred values are displayed as 0.
 - Style RegisterForm as one column for `small` screensize.
 - Project card badges are now circular in Safari.
+- Inconsistent text sizes for Markdown tables and lists.
 
 ## [1.13.0] 2024-05-17
 

diff --git a/packages/lib-react-components/src/Markdownz/Markdownz.js b/packages/lib-react-components/src/Markdownz/Markdownz.js
@@ -46,13 +46,17 @@ const StyledHorizontalRule = styled.hr`
   width: 100%;
 `
 const StyledOrderedList = styled.ol`
-  font-size: 14px;
+  font-size: 1rem;
   margin-top: 0;
 `
 const StyledUnorderedList = styled.ul`
-  font-size: 14px;
+  font-size: 1rem;
   margin-top: 0;
 `
+const StyledTable = styled(Table)`
+  font-size: 1rem;
+`
+
 const StyledVideo = styled.video`
   max-width: 100%;
 `
@@ -68,7 +72,7 @@ const componentMappings = {
   img: renderMedia,
   p: Paragraph,
   span: Text,
-  table: Table,
+  table: StyledTable,
   tfoot: TableFooter,
   thead: TableHeader,
   tbody: TableBody,