Post meta line fix 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

@@ -4,6 +4,7 @@ import { ShareLinks } from '@/components/post/ShareLinks'
 import { TableOfContents } from '@/components/post/TableOfContents'
 import { getAllPostSlugs, getNextAndPreviousPosts, getPostBySlug } from '@/lib/posts'
 import { slugify } from '@/utils/slug'
+import { Pencil, SendHorizonal } from 'lucide-react'
 import type { Metadata } from 'next'
 import Link from 'next/link'
 
@@ -43,7 +44,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)}`}
@@ -53,9 +54,12 @@ export default async function Post({ params }: { params: Promise<{ slug: string
           </Link>
         )}
         <h1 className="text-4xl font-bold mb-4">{meta.title}</h1>
-        <div className="flex items-center gap-2 text-fg-dim mb-4 border-y border-border py-2 px-4 text-sm">
+        <div className="flex justify-between md:justify-normal items-center gap-2 text-fg-dim mb-4 border-y border-border py-2 px-2 md:px-4 text-sm">
           <div className="flex items-center gap-2">
-            <span>Posted</span>
+            <span className="hidden md:inline">Posted</span>
+            <span className="md:hidden">
+              <SendHorizonal className="w-3 h-3" />
+            </span>
             <time
               dateTime={meta.date}
               title={new Date(meta.date).toLocaleString()}
@@ -63,16 +67,19 @@ export default async function Post({ params }: { params: Promise<{ slug: string
             >
               {new Date(meta.date).toLocaleDateString(undefined, {
                 day: 'numeric',
-                month: 'long',
+                month: 'short',
                 year: 'numeric',
               })}
             </time>
           </div>
-          <span>&middot;</span>
+          <span className="hidden md:inline">&middot;</span>
           {meta.updated && (
             <>
               <div className="flex items-center gap-2">
-                <span>Updated</span>
+                <span className="hidden md:inline">Updated</span>
+                <span className="md:hidden">
+                  <Pencil className="w-3 h-3" />
+                </span>
                 <time
                   dateTime={meta.updated}
                   title={new Date(meta.updated).toLocaleString()}
@@ -80,12 +87,12 @@ export default async function Post({ params }: { params: Promise<{ slug: string
                 >
                   {new Date(meta.updated).toLocaleDateString(undefined, {
                     day: 'numeric',
-                    month: 'long',
+                    month: 'short',
                     year: 'numeric',
                   })}
                 </time>
               </div>
-              <span>&middot;</span>
+              <span className="hidden md:inline">&middot;</span>
             </>
           )}
           <span>{meta.readingTimeText}</span>

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
         }