diff --git a/web/app.config.ts b/web/app.config.ts
index d5c367e68..4376a2350 100644
--- a/web/app.config.ts
+++ b/web/app.config.ts
@@ -45,7 +45,8 @@ export default {
     // https://ui.nuxt.com/docs/components/toast#theme
     toast: {
       slots: {
-        title: 'truncate pr-6',
+        title: 'truncate', // can also use break-words instead of truncating
+        description: 'truncate',
       },
     },
 
diff --git a/web/src/components/Notifications/Item.vue b/web/src/components/Notifications/Item.vue
index 4b441b47b..6d41a77f0 100644
--- a/web/src/components/Notifications/Item.vue
+++ b/web/src/components/Notifications/Item.vue
@@ -94,7 +94,7 @@ const reformattedTimestamp = computed<string>(() => {
       >
         <!-- the `translate` compensates for extra space added by the `svg` element when rendered -->
         <UIcon v-if="icon" :name="icon.name" class="size-5 shrink-0 translate-y-1" :class="icon.color" />
-        <span class="flex-1 truncate" :title="title">{{ title }}</span>
+        <span class="flex-1 break-words" :title="title">{{ title }}</span>
       </h3>
 
       <div