Merge pull request #3630 from IntersectMBO/fix/3615-bug-markdown-tables-in-governance-actions-are-cropped-on-smaller-screens

fix(#3615): wrap the markdown table styles around markdown class

Author: MSzalowski

govtool/frontend/src/components/molecules/GovernanceActionCardElement.tsx

@@ -147,6 +147,7 @@ export const GovernanceActionCardElement = ({
 
     return (
       <Markdown
+        className="markdown"
         components={markdownComponents}
         remarkPlugins={[remarkMath, remarkGfm]}
         rehypePlugins={[rehypeKatex]}

govtool/frontend/src/components/molecules/tableMarkdown.css

@@ -1,26 +1,28 @@
-table {
-  display: block;
-  overflow-x: auto;
-  margin: 32px 0;
-  border-spacing: 0;
-  border-collapse: collapse;
-  max-width: 100%;
-}
+.markdown {
+  & table {
+    display: block;
+    overflow-x: auto;
+    margin: 32px 0;
+    border-spacing: 0;
+    border-collapse: collapse;
+    max-width: 100%;
 
-table thead {
-  background-color: #d6e2ff80;
-}
+    & thead {
+      background-color: #d6e2ff80;
+    }
 
-table th,
-table td {
-  padding: 6px 13px;
-  border: 1px solid #d6e2ff;
-}
+    & th,
+    & td {
+      padding: 6px 13px;
+      border: 1px solid #d6e2ff;
+    }
 
-table td > :last-child {
-  margin-bottom: 0;
-}
+    & td > :last-child {
+      margin-bottom: 0;
+    }
 
-table tr:nth-child(2n) {
-  background-color: #d6e2ff80;
+    & tr:nth-child(2n) {
+      background-color: #d6e2ff80;
+    }
+  }
 }