diff --git a/src/assets/index.css b/src/assets/index.css
index b73b0258..c3370912 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -7,6 +7,10 @@
   }
 }
 @layer utilities {
+  /* word break */
+  .wb {
+    word-break: break-word;
+  }
   .checkbox {
     appearance: none;
     margin: 0;
diff --git a/src/index.tsx b/src/index.tsx
index b9234224..449d7a3f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -29,7 +29,7 @@ root.render(
   <Suspense fallback="loading">
     <Toaster
       toastOptions={{
-        className: "dark:!bg-gray-800 dark:!text-gray-50"
+        className: "dark:!bg-gray-800 dark:!text-gray-50 wb"
       }}
     />
     <DndProvider backend={HTML5Backend}>