Fixed katex rendering on mobile

app/globals.css

@@ -1,5 +1,6 @@
 @import 'tailwindcss';
 @import '../node_modules/highlight.js/styles/monokai.min.css';
+@import '../node_modules/katex/dist/katex.min.css';
 
 @theme {
   --color-bg: #040404;
@@ -24,6 +25,16 @@ pre code.hljs {
   @apply p-0;
 }
 
+.katex-display {
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-block-end: 0.25rem;
+}
+
+.katex-display > .katex > .katex-html > .tag {
+  @apply relative ml-8 lg:absolute lg:right-1;
+}
+
 * {
   @apply scroll-smooth;
 }

app/posts/[slug]/page.tsx

@@ -43,7 +43,7 @@ export default async function Post({ params }: { params: Promise<{ slug: string
 
   return (
     <main className="flex w-full">
-      <article className="max-w-3xl 2xl:max-w-4xl mx-auto px-4 py-8 lg:py-16">
+      <article className="max-w-3xl 2xl:max-w-4xl mx-auto px-4 py-8 lg:py-16 min-w-0">
         {meta.category && (
           <Link
             href={`/categories/${slugify(meta.category)}`}

lib/posts.tsx

@@ -80,7 +80,7 @@ export async function getPostBySlug(slug: string) {
     .use(rehypeDefinition)
 
   if (data.math) {
-    processor = processor.use(rehypeKatex, { output: 'mathml' })
+    processor = processor.use(rehypeKatex)
   }
 
   if (data.mermaid) {

lib/rehype-mermaid-ssg.ts

@@ -29,6 +29,8 @@ export const rehypeMermaidSsg: Plugin<[], Root> = () => async (tree: Root) => {
         const svg = await renderMermaidToSvg(chart)
         const svgTree = fromHtmlIsomorphic(svg, { fragment: true })
         const svgNode = svgTree.children.find((c) => c.type === 'element') as Element | undefined
+        svgNode?.properties.className?.push('max-w-160', 'mx-auto', 'my-4')
+        if (svgNode?.properties.style) svgNode.properties.style = ''
         if (svgNode) {
           ;(parent.children as Element[])[index] = svgNode
         }