Fix Table

astro.config.mjs

@@ -11,6 +11,7 @@ import { defineConfig } from "astro/config"
 import sitemap from "@astrojs/sitemap"
 import mdx from "@astrojs/mdx"
 import react from "@astrojs/react" // @ts-check
+import responsiveTables from "./src/plugins/responsiveTables.mjs"
 
 // https://astro.build/config
 export default defineConfig(
@@ -21,7 +22,12 @@ export default defineConfig(
     markdown: {
       syntaxHighlight: false,
       // TODO: Add official Shiki integration when line highlighting is supported
-      remarkPlugins: [myRemarkShiki, youtubeEmbed, responsiveImages],
+      remarkPlugins: [
+        myRemarkShiki,
+        youtubeEmbed,
+        responsiveImages,
+        responsiveTables,
+      ],
     },
   },
 )

src/blogComponents/cornerShape/CornerShapePlayground.jsx

@@ -61,7 +61,7 @@ const styles = {
     fontSize: "1.25rem",
   },
   warningCode: {
-    backgroundColor: "var(--theme-tangent-code-inline-bg);",
+    backgroundColor: "var(--theme-tangent-code-inline-bg)",
     padding: "0.1em 0.3em",
     borderRadius: "0.2em",
     fontSize: "0.9em",

src/pages/2024-01/next-js-app-router-cache/index.mdx

@@ -444,4 +444,4 @@ The table below summarizes all four caching mechanisms and their details.
 | Data Cache          | Stores data across user requests and deployments          | Server   | Time-based or on-demand revalidation                                           |
 | Request Memoization | Re-use values in same render pass for efficiency          | Server   | N/A, only lasts for the lifetime of a server request                           |
 | Full Route Cache    | Caches static routes at build time to improve performance | Server   | Revalidated by revalidating Data Cache or redeploying the application          |
-| Router Cache        | Stores navigated routes to optimize navigation epxerience | Client   | Automatic invalidation after a specific time or when the data cache is cleared |
+| Router Cache        | Stores navigated routes to optimize navigation experience | Client   | Automatic invalidation after a specific time or when the data cache is cleared |

src/pages/2026-05/corner-shape/index.mdx

@@ -256,7 +256,6 @@ You use `superellipse()` when you want a shape that falls _between_ the named ke
   />
 
 {" "}
-
 <CornerShapeExample
   borderRadius="40%"
   cornerShape="superellipse(1.5)"
@@ -319,15 +318,12 @@ The `corner-shape` shorthand also accepts up to four values following the same c
     height="100px"
   />
 
-{" "}
-
-<CornerShapeExample
-  borderRadius="2rem"
-  cornerShape="round bevel scoop superellipse(4)"
-  selector=".mixed-shorthand"
-  height="100px"
-/>
-
+  <CornerShapeExample
+    borderRadius="2rem"
+    cornerShape="round bevel scoop superellipse(4)"
+    selector=".mixed-shorthand"
+    height="100px"
+  />
 </div>
 
 ## Interactive Playground

src/plugins/responsiveTables.mjs

@@ -0,0 +1,20 @@
+import { visit } from "unist-util-visit"
+
+export default function responsiveTables() {
+  return transformer
+}
+
+function transformer(tree) {
+  visit(tree, "table", (node, index, parent) => {
+    const wrapper = {
+      type: "containerDirective", // or use 'parent' depending on your toolchain
+      data: {
+        hName: "div",
+        hProperties: { className: ["responsive-table"] },
+      },
+      children: [node],
+    }
+
+    parent.children[index] = wrapper
+  })
+}

src/styles/blog.css

@@ -153,10 +153,16 @@ blockquote .source {
   overflow: hidden;
 }
 
+.responsive-table {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
 table {
   font-size: 1rem;
   border-collapse: collapse;
   width: 100%;
+  overflow-x: auto;
 }
 
 thead {