fix any error messages with words that are too long and push the "X" off the page

src/App.vue

@@ -45,7 +45,7 @@
 
             <div class="relative w-full pl-4 pr-8 py-2 text-slate-900">
               <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ notification.text }}</p>
+              <p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
 
               <button
                 @click="close(notification.id)"
@@ -68,7 +68,7 @@
 
             <div class="relative w-full pl-4 pr-8 py-2 text-emerald-900">
               <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ notification.text }}</p>
+              <p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
 
               <button
                 @click="close(notification.id)"
@@ -91,7 +91,7 @@
 
             <div class="relative w-full pl-4 pr-8 py-2 text-amber-900">
               <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ notification.text }}</p>
+              <p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
 
               <button
                 @click="close(notification.id)"
@@ -114,7 +114,7 @@
 
             <div class="relative w-full pl-4 pr-8 py-2 text-rose-900">
               <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ notification.text }}</p>
+              <p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
 
               <button
                 @click="close(notification.id)"
@@ -329,6 +329,13 @@ 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) {
     let subscription: object | null = null;
 

src/views/ContactEditView.vue

@@ -103,7 +103,7 @@ export default class ContactEditView extends Vue {
         group: "alert",
         type: "danger",
         title: "Contact Not Found",
-        text: "There is no contact with that DID.",
+        text: "There is no contact with DID " + contactDid,
       });
       (this.$router as Router).push({ path: "/contacts" });
       return;