From fa6c205838e4a504e81e23625f3806931a09396d Mon Sep 17 00:00:00 2001
From: HangerThem <f.borisjuk@gmail.com>
Date: Mon, 3 Aug 2026 20:49:41 +0200
Subject: [PATCH] Post meta line fix on mobile

---
 app/posts/[slug]/page.tsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
index 931abda..0c9f076 100644
--- a/app/posts/[slug]/page.tsx
+++ b/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'
 
@@ -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>