Fix: switch to CSS-based text-truncate

- Eliminate dependence on arbitrary maxlength for truncation
- Ensure truncation is purely visual, and does not touch content

src/App.vue

@@ -27,9 +27,9 @@
             v-if="notification.type === 'toast'"
             class="w-full max-w-sm mx-auto mb-3 overflow-hidden bg-slate-900/90 text-white rounded-lg shadow-md"
           >
-            <div class="w-full px-4 py-3">
+            <div class="w-full px-4 py-3 overflow-hidden">
-              <span class="font-semibold">{{ notification.title }}</span>
+              <h4 class="font-semibold text-ellipsis overflow-hidden">{{ notification.title }}</h4>
-              <p class="text-sm">{{ notification.text }}</p>
+              <p class="text-sm text-ellipsis overflow-hidden">{{ notification.text }}</p>
             </div>
           </div>
 
@@ -46,9 +46,9 @@
               ></font-awesome>
             </div>
 
-            <div class="relative w-full pl-4 pr-8 py-2 text-slate-900">
+            <div class="relative w-full pl-4 pr-8 py-2 text-slate-900 overflow-hidden">
-              <span class="font-semibold">{{ notification.title }}</span>
+              <h4 class="font-semibold text-ellipsis overflow-hidden">{{ notification.title }}</h4>
-              <p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
+              <p class="text-sm text-ellipsis overflow-hidden">{{ notification.text }}</p>
 
               <button
                 class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-slate-200 text-slate-600"
@@ -72,9 +72,9 @@
               ></font-awesome>
             </div>
 
-            <div class="relative w-full pl-4 pr-8 py-2 text-emerald-900">
+            <div class="relative w-full pl-4 pr-8 py-2 text-emerald-900 overflow-hidden">
-              <span class="font-semibold">{{ notification.title }}</span>
+              <h4 class="font-semibold text-ellipsis overflow-hidden">{{ notification.title }}</h4>
-              <p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
+              <p class="text-sm text-ellipsis overflow-hidden">{{ notification.text }}</p>
 
               <button
                 class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-emerald-200 text-emerald-600"
@@ -98,9 +98,9 @@
               ></font-awesome>
             </div>
 
-            <div class="relative w-full pl-4 pr-8 py-2 text-amber-900">
+            <div class="relative w-full pl-4 pr-8 py-2 text-amber-900 overflow-hidden">
-              <span class="font-semibold">{{ notification.title }}</span>
+              <h4 class="font-semibold text-ellipsis overflow-hidden">{{ notification.title }}</h4>
-              <p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
+              <p class="text-sm text-ellipsis overflow-hidden">{{ notification.text }}</p>
 
               <button
                 class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-amber-200 text-amber-600"
@@ -124,9 +124,9 @@
               ></font-awesome>
             </div>
 
-            <div class="relative w-full pl-4 pr-8 py-2 text-rose-900">
+            <div class="relative w-full pl-4 pr-8 py-2 text-rose-900 overflow-hidden">
-              <span class="font-semibold">{{ notification.title }}</span>
+              <h4 class="font-semibold text-ellipsis overflow-hidden">{{ notification.title }}</h4>
-              <p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
+              <p class="text-sm text-ellipsis overflow-hidden">{{ notification.text }}</p>
 
               <button
                 class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-rose-200 text-rose-600"
@@ -349,13 +349,6 @@ export default class App extends Vue {
 
   stopAsking = false;
 
-  truncateLongWords(sentence: string) {
-    return sentence
-      .split(" ")
-      .map((word) => (word.length > 30 ? word.slice(0, 30) + "..." : word))
-      .join(" ");
-  }
-
   async turnOffNotifications(
     notification: NotificationIface,
   ): Promise<boolean> {