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,
     ],
   },
 

src/content/index.md

@@ -26,4 +26,3 @@ I am a software developer from Germany who is passionate about building high qua
 - [qBittorrent](https://www.qbittorrent.org)
 - [Tuta Mail](https://tuta.com)
 - [Visual Studio Code](https://code.visualstudio.com)
-

src/layouts/PageLayout.astro

@@ -22,7 +22,7 @@ const { title, description, pubDate, modDate, slug } = Astro.props;
     <Header {title} {pubDate} {modDate} {slug} />
     <main class="flex-1 bg-white dark:bg-neutral-800">
       <div
-        class={`relative prose prose-neutral dark:prose-invert mx-auto px-4 ${pubDate ? "pt-0" : "pt-8"} pb-16 ${Astro.originPathname === "/" ? "prose-headings:scroll-mt-12" : "prose-headings:scroll-mt-24 lg:prose-headings:scroll-mt-16"} prose-h1:font-bold prose-pre:!bg-neutral-700 prose-a:font-normal prose-a:not-in-prose-headings:text-blue-800 prose-a:not-in-prose-headings:dark:text-blue-300 prose-a:hover:no-underline prose-a:active:bg-neutral-200 prose-a:active:dark:bg-neutral-700 prose-a:in-prose-headings:font-bold prose-a:in-prose-headings:decoration-2 prose-a:in-prose-headings:no-underline prose-a:in-prose-headings:hover:underline`}
+        class={`relative prose prose-neutral dark:prose-invert mx-auto px-4 ${pubDate ? "pt-0" : "pt-8"} pb-16 ${Astro.originPathname === "/" ? "prose-headings:scroll-mt-12" : "prose-headings:scroll-mt-24 lg:prose-headings:scroll-mt-16"} prose-table:text-base prose-h1:font-bold prose-pre:!bg-neutral-700 prose-a:font-normal prose-a:not-in-prose-headings:text-blue-800 prose-a:not-in-prose-headings:dark:text-blue-300 prose-a:hover:no-underline prose-a:active:bg-neutral-200 prose-a:active:dark:bg-neutral-700 prose-a:in-prose-headings:font-bold prose-a:in-prose-headings:decoration-2 prose-a:in-prose-headings:no-underline prose-a:in-prose-headings:hover:underline`}
       >
         <slot />
       </div>

src/styles/global.css

@@ -33,15 +33,11 @@
   }
 
   #software + ul > li {
-    @apply list-none !m-0 !p-0;
+    @apply !m-0 list-none !p-0;
   }
 
   #software + ul > li a {
-    @apply border border-neutral-300 dark:border-neutral-600 px-2 py-1;
-  }
-
-  table {
-    @apply !text-base;
+    @apply border border-neutral-300 px-2 py-1 dark:border-neutral-600;
   }
 }