Added break-words and hypens to prevent event cta from overflowing

app.vue

@@ -5,6 +5,9 @@ useHead({
   titleTemplate: (titleChunk) => {
     return titleChunk ? `${titleChunk} — TTTools` : 'TTTools';
   },
+  htmlAttrs: {
+    lang: 'fr'
+  },
   meta: [
     { name: "charset", content: "UTF-8" },
     { name: "viewport", content: "width=device-width, initial-scale=1.0" },

components/calendar/CalendarEvent.vue

@@ -59,7 +59,7 @@ function handleClosePopover() {
           })
         "
       >
-        <div class="line-clamp-2">
+        <div class="line-clamp-2 [overflow-wrap:anywhere] hyphens-auto">
           {{ eventTitle }}
         </div>
       </button>

pages/index.vue

@@ -8,7 +8,7 @@ setCurrentMenu([])
 </script>
 
 <template>
-  <main class="h-full grid grid-cols-[auto_1fr]">
-    Test
+  <main class="p-8">
+    <Heading>TTTools</Heading>
   </main>
 </template>