Merge pull request #271 from dotkernel/article-status

fixed narrow tables

Author: bidi47

public/css/app.css

@@ -242,18 +242,21 @@ $bp-tablet: 900px;
   }
 
   // Markdown tables render as bare <table> elements, so they are styled by tag.
-  // display:block lets a wide table scroll sideways instead of overflowing the column.
-  table {
-    display: block;
-    width: 100%;
-    max-width: 100%;
+  // The template wraps each one in .table-wrap so a wide table scrolls sideways
+  // instead of overflowing the column.
+  .table-wrap {
     margin: 0 0 24px;
     overflow-x: auto;
     border: 1px solid var(--border);
     border-radius: 8px;
+    background: var(--surface);
+  }
+
+  table {
+    width: 100%;
+    margin: 0;
     border-collapse: collapse;
     font-size: 14.5px;
-    background: var(--surface);
 
     th,
     td {

src/App/assets/scss/components/_blog.scss

@@ -1,7 +1,7 @@
 {% extends '@layout/blog-post.html.twig' %}
 
 {% block body %}
-{{ content|markdown_to_html }}
+{{ content|markdown_to_html|replace({'<table>': '<div class="table-wrap"><table>', '</table>': '</table></div>'})|raw }}
 
 {% if faq is not empty %}
 <h2 id="user-content-faq">Frequently Asked Questions</h2>