Update table for mobile (github#36009)

gracepark · web-flow · commit dd134aac626e · 2023-03-29T21:54:42.000Z
diff --git a/components/ui/MarkdownContent/stylesheets/table.scss b/components/ui/MarkdownContent/stylesheets/table.scss
@@ -12,6 +12,14 @@
   from expanding beyond the horizontal boundaries of the parent element. */
     table-layout: auto;
 
+    /* For mobile (small viewports) we need to fix the table because if the table 
+    is larger than the viewport it will force the width of the table causing issues
+    with the header on scroll 
+    */
+    @media (max-width: 544px) {
+      table-layout: fixed;
+    }
+
     code {
       font-size: 85%;
       padding: 0.2em 0.4em;
