From cb7ebc3a2d1fc55f8735482fa4564b2dc1f01331 Mon Sep 17 00:00:00 2001
From: Web Dev Simplified <kyle@webdevsimplified.com>
Date: Tue, 19 May 2026 06:49:14 -0500
Subject: [PATCH] Fix Table

---
 astro.config.mjs                              |  8 +++++++-
 .../cornerShape/CornerShapePlayground.jsx     |  2 +-
 .../next-js-app-router-cache/index.mdx        |  2 +-
 src/pages/2026-05/corner-shape/index.mdx      | 16 ++++++---------
 src/plugins/responsiveTables.mjs              | 20 +++++++++++++++++++
 src/styles/blog.css                           |  6 ++++++
 6 files changed, 41 insertions(+), 13 deletions(-)
 create mode 100644 src/plugins/responsiveTables.mjs

diff --git a/astro.config.mjs b/astro.config.mjs
index cd26b14..63194eb 100644
--- a/astro.config.mjs
+++ b/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,
+      ],
     },
   },
 )
diff --git a/src/blogComponents/cornerShape/CornerShapePlayground.jsx b/src/blogComponents/cornerShape/CornerShapePlayground.jsx
index 0b9f390..1b8fcf8 100644
--- a/src/blogComponents/cornerShape/CornerShapePlayground.jsx
+++ b/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",
diff --git a/src/pages/2024-01/next-js-app-router-cache/index.mdx b/src/pages/2024-01/next-js-app-router-cache/index.mdx
index 4da8961..f2ba9d7 100644
--- a/src/pages/2024-01/next-js-app-router-cache/index.mdx
+++ b/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 |
diff --git a/src/pages/2026-05/corner-shape/index.mdx b/src/pages/2026-05/corner-shape/index.mdx
index 6acd56d..4cfa69c 100644
--- a/src/pages/2026-05/corner-shape/index.mdx
+++ b/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
diff --git a/src/plugins/responsiveTables.mjs b/src/plugins/responsiveTables.mjs
new file mode 100644
index 0000000..1a0ab44
--- /dev/null
+++ b/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
+  })
+}
diff --git a/src/styles/blog.css b/src/styles/blog.css
index b9970ab..d4d6611 100644
--- a/src/styles/blog.css
+++ b/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 {