From 876ef91f634e3ce0e666450ac4f1aa61e299d0a9 Mon Sep 17 00:00:00 2001
From: eggy <eggyrules@gmail.com>
Date: Tue, 9 Aug 2022 21:12:49 -0400
Subject: [PATCH] fix: properly break titles

---
 components/BlogStatBox.vue  | 6 ++++++
 components/ProjectCard.vue  | 2 +-
 components/StoryStatBox.vue | 8 +++++---
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/components/BlogStatBox.vue b/components/BlogStatBox.vue
index 688428c..f894e01 100644
--- a/components/BlogStatBox.vue
+++ b/components/BlogStatBox.vue
@@ -58,3 +58,9 @@ const prettyDate = latestDate.format("DD MMM YYYY");
     </HomeStatBox>
   </div>
 </template>
+
+<style scoped>
+h2 {
+  overflow-wrap: break-word;
+}
+</style>
diff --git a/components/ProjectCard.vue b/components/ProjectCard.vue
index 755d92f..fea9487 100644
--- a/components/ProjectCard.vue
+++ b/components/ProjectCard.vue
@@ -23,7 +23,7 @@ const imgUrl = `url(/assets/images/projects/${project.img ?? ""})`;
       <div class="card-text h-full bg-white p-4 pt-2">
         <div>
           <h3 class="m-0">{{ project.name }}</h3>
-          <div class="flex gap-1 items-center">
+          <div class="flex gap-1 items-center flex-nowrap">
             <img
               class="h-5 w-5 m-0"
               :src="`/assets/images/langs/${lang}.svg`"
diff --git a/components/StoryStatBox.vue b/components/StoryStatBox.vue
index e7bc6c2..9b115b3 100644
--- a/components/StoryStatBox.vue
+++ b/components/StoryStatBox.vue
@@ -52,8 +52,10 @@ const prettyDate = latestDate.format("DD MMM YYYY");
         </template>
       </ContentRenderer>
       -->
-      <p class="excerpt text-gray-600 dark:text-gray-300 text-base m-0 mt-5">
-        {{ latest.description }} …
+      <p
+        class="excerpt text-gray-600 dark:text-gray-300 text-base m-0 mt-5 text-ellipsis"
+      >
+        {{ latest.description }} ...
       </p>
     </HomeStatBox>
   </div>
@@ -61,6 +63,6 @@ const prettyDate = latestDate.format("DD MMM YYYY");
 
 <style scoped>
 h2 {
-  word-break: break-all;
+  overflow-wrap: break-word;
 }
 </style>