Fix

astro.config.ts

@@ -4,6 +4,54 @@ import sitemap from "@astrojs/sitemap";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeSlug from "rehype-slug";
 
+type RehypeNode = {
+  type: string;
+  tagName?: string;
+  children?: RehypeNode[];
+  properties?: {
+    [key: string]: unknown;
+    className?: string[];
+  };
+};
+
+type RehypeParent = RehypeNode & {
+  children: RehypeNode[];
+};
+
+type RehypeRoot = RehypeParent;
+
+const rehypeWrapTables = () => {
+  const visit = (node: RehypeNode, parent: RehypeParent | null) => {
+    if (node.type === "element" && node.tagName === "table" && parent) {
+      const wrapper: RehypeNode = {
+        type: "element",
+        tagName: "div",
+        properties: {
+          className: ["overflow-x-auto", "max-w-full"],
+        },
+        children: [node],
+      };
+
+      const index = parent.children.indexOf(node);
+      if (index !== -1) {
+        parent.children[index] = wrapper;
+      }
+
+      return;
+    }
+
+    if (Array.isArray(node.children)) {
+      for (const child of node.children) {
+        visit(child, node as RehypeParent);
+      }
+    }
+  };
+
+  return (tree: RehypeRoot) => {
+    visit(tree, null);
+  };
+};
+
 export default defineConfig({
   site: "https://thilohohlt.com",
 
@@ -27,6 +75,7 @@ export default defineConfig({
           behavior: "wrap",
         },
       ],
+      rehypeWrapTables,
     ],
   },