style: scrollable tables

quartz/styles/base.scss

@@ -390,23 +390,33 @@ p {
   line-height: 1.6rem;
 }
 
-table {
+.table-container {
-  margin: 1rem;
+  overflow-x: auto;
-  padding: 1.5rem;
+
-  border-collapse: collapse;
+  & > table {
-  & > * {
+    margin: 1rem;
-    line-height: 2rem;
+    padding: 1.5rem;
+    border-collapse: collapse;
+
+    th,
+    td {
+      min-width: 75px;
+    }
+
+    & > * {
+      line-height: 2rem;
+    }
   }
 }
 
 th {
   text-align: left;
-  padding: 0.4rem 1rem;
+  padding: 0.4rem 0.7rem;
   border-bottom: 2px solid var(--gray);
 }
 
 td {
-  padding: 0.2rem 1rem;
+  padding: 0.2rem 0.7rem;
 }
 
 tr {

quartz/util/jsx.tsx

@@ -1,14 +1,28 @@
-import { toJsxRuntime } from "hast-util-to-jsx-runtime"
+import { Components, toJsxRuntime } from "hast-util-to-jsx-runtime"
 import { QuartzPluginData } from "../plugins/vfile"
 import { Node, Root } from "hast"
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime"
 import { trace } from "./trace"
 import { type FilePath } from "./path"
 
+const customComponents: Components = {
+  table: (props) => (
+    <div class="table-container">
+      <table {...props} />
+    </div>
+  ),
+}
+
 export function htmlToJsx(fp: FilePath, tree: Node<QuartzPluginData>) {
   try {
     // @ts-ignore (preact makes it angry)
-    return toJsxRuntime(tree as Root, { Fragment, jsx, jsxs, elementAttributeNameCase: "html" })
+    return toJsxRuntime(tree as Root, {
+      Fragment,
+      jsx,
+      jsxs,
+      elementAttributeNameCase: "html",
+      components: customComponents,
+    })
   } catch (e) {
     trace(`Failed to parse Markdown in \`${fp}\` into JSX`, e as Error)
   }