From bbb615950612e561a1b1ccd3823234a1232b5cb7 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Sun, 30 Jun 2024 17:58:22 +0200
Subject: [PATCH] Add flex wrap

---
 app/pages/writings/[slug].vue | 4 ++--
 app/pages/writings/index.vue  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/pages/writings/[slug].vue b/app/pages/writings/[slug].vue
index 27dffcc..2155068 100644
--- a/app/pages/writings/[slug].vue
+++ b/app/pages/writings/[slug].vue
@@ -58,7 +58,7 @@ async function handleLike() {
       {{ getDetails() }}
     </p>
     <div>
-      <div class="flex items-end gap-2">
+      <div class="flex items-end gap-2 flex-wrap">
         <h1
           class="font-bold text-3xl text-black dark:text-white"
         >
@@ -101,7 +101,7 @@ async function handleLike() {
           Thanks for reading this post! If you liked it, please consider sharing it with your friends. <strong>Don't
             forget to leave a like!</strong>
         </p>
-        <div class="flex gap-4 items-center">
+        <div class="flex gap-4 items-center flex-wrap">
           <UButton
             :label="postDB?.likes > 1 ? `${postDB?.likes} likes` : `${postDB?.likes} like`"
             color="red"
diff --git a/app/pages/writings/index.vue b/app/pages/writings/index.vue
index ae42971..08329e7 100644
--- a/app/pages/writings/index.vue
+++ b/app/pages/writings/index.vue
@@ -43,7 +43,7 @@ function getDetails(slug: string) {
             <div class="border-l-2 pl-2 border-gray-300 dark:border-gray-700 rounded-sm">
               <p>{{ getDetails(writing.slug) }}</p>
             </div>
-            <div class="flex items-center gap-2">
+            <div class="flex items-center gap-2 flex-wrap">
               <h1
                 class="font-bold text-lg duration-300 text-neutral-600 group-hover:text-black dark:text-neutral-400 dark:group-hover:text-white"
               >