From 4ff379374eb95be8dcd391e653c1544ce1888587 Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Sun, 9 Jul 2023 10:17:08 +0900
Subject: [PATCH] fix: fix post card metadata wrapping incorrectly

---
 apps/blog/src/components/PostCard.tsx | 28 ++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/apps/blog/src/components/PostCard.tsx b/apps/blog/src/components/PostCard.tsx
index 3afad7f..c0c53b3 100644
--- a/apps/blog/src/components/PostCard.tsx
+++ b/apps/blog/src/components/PostCard.tsx
@@ -40,17 +40,23 @@ export default function PostCard({ postData, className }: Props) {
                                 ))}
                         </TagList>
                         <hr />
-                        <div className="flex items-center gap-2">
-                            <FontAwesomeIcon icon={faCalendar} />
-                            {date || "Unknown date"}
-                            <FontAwesomeIcon icon={faBook} />
-                            {readTime
-                                ? readTime + " read"
-                                : "unknown read time"}
-                            <FontAwesomeIcon icon={faHourglass} />
-                            {typeof wordCount === "number"
-                                ? wordCount + " words"
-                                : "unknown length"}
+                        <div className="flex flex-wrap items-center gap-2">
+                            <div className="flex items-center gap-2 whitespace-nowrap">
+                                <FontAwesomeIcon icon={faCalendar} />
+                                {date || "Unknown date"}
+                            </div>
+                            <div className="flex items-center gap-2 whitespace-nowrap">
+                                <FontAwesomeIcon icon={faBook} />
+                                {readTime
+                                    ? readTime + " read"
+                                    : "unknown read time"}
+                            </div>
+                            <div className="flex items-center gap-2 whitespace-nowrap">
+                                <FontAwesomeIcon icon={faHourglass} />
+                                {typeof wordCount === "number"
+                                    ? wordCount + " words"
+                                    : "unknown length"}
+                            </div>
                         </div>
                     </small>
                 </Card>
-- 
2.47.2