fix(post): make table scrollable on small screens

src/app/blog/post/[slug]/page.tsx

@@ -142,7 +142,12 @@ const mdxComponents = {
       {children}
     </blockquote>
   ),
-  Spoiler
+  Spoiler,
+  table: ({ children, ...rest }: ComponentProps<'table'>) => (
+    <div className="my-3 overflow-x-auto">
+      <table {...rest}>{children}</table>
+    </div>
+  )
 }
 
 const exampleToc = posts[0].toc[0]

src/styles/components.css

@@ -88,7 +88,7 @@
     }
 
     table {
-      @apply my-4 max-w-full border-separate border-spacing-0 overflow-hidden rounded-lg;
+      @apply my-1 w-max border-separate border-spacing-0 overflow-hidden rounded-lg md:max-w-full;
       /*@apply bg-neutral-100 dark:bg-neutral-950;*/
 
       th,