From b9d433b37c825d8fca7f464be22d35068d342898 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 4 Aug 2023 12:34:25 -0300
Subject: [PATCH] Fixed break words on all code

---
 .../components/parameterComponent/index.tsx          |  2 +-
 .../components/singleAlertComponent/index.tsx        |  4 ++--
 src/frontend/src/alerts/notice/index.tsx             |  4 +++-
 src/frontend/src/modals/codeAreaModal/index.tsx      |  4 ++--
 .../src/modals/formModal/chatMessage/index.tsx       |  4 ++--
 .../src/modals/importModal/buttonBox/index.tsx       |  2 +-
 src/frontend/src/style/applies.css                   | 12 ++++++------
 src/frontend/tailwind.config.js                      |  4 +++-
 8 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index e91d65a3e..72c2a8e4d 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -87,7 +87,7 @@ export default function ParameterComponent({
   useEffect(() => {
     if (name === "openai_api_base") console.log(info);
     infoHtml.current = (
-      <div className="h-full w-full break-words">
+      <div className="h-full w-full word-break-break-word">
         {info.split("\n").map((line, i) => (
           <p key={i} className="block">
             {line}
diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index 9a94db7d5..ca15abc86 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -36,14 +36,14 @@ export default function SingleAlert({
             />
           </div>
           <div className="ml-3">
-            <h3 className="break-words text-sm font-medium text-error-foreground">
+            <h3 className="text-sm font-medium text-error-foreground word-break-break-word">
               {dropItem.title}
             </h3>
             {dropItem.list ? (
               <div className="mt-2 text-sm text-error-foreground">
                 <ul className="list-disc space-y-1 pl-5">
                   {dropItem.list.map((item, idx) => (
-                    <li className="break-words" key={idx}>
+                    <li className="word-break-break-word" key={idx}>
                       {item}
                     </li>
                   ))}
diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx
index 494d9d4dc..1acd5c898 100644
--- a/src/frontend/src/alerts/notice/index.tsx
+++ b/src/frontend/src/alerts/notice/index.tsx
@@ -47,7 +47,9 @@ export default function NoticeAlert({
             />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-info-foreground">{title}</p>
+            <p className="text-sm text-info-foreground word-break-break-word">
+              {title}
+            </p>
             <p className="mt-3 text-sm md:ml-6 md:mt-0">
               {link !== "" ? (
                 <Link
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 53540ac16..935ae2964 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -180,8 +180,8 @@ export default function CodeAreaModal({
               <h1 className="text-lg text-destructive">
                 {error?.detail?.error}
               </h1>
-              <div className="ml-2 w-full break-all text-sm text-status-red">
-                <pre className="w-full whitespace-pre-wrap break-all">
+              <div className="ml-2 w-full text-sm text-status-red word-break-break-word">
+                <pre className="w-full word-break-break-word">
                   {error?.detail?.traceback}
                 </pre>
               </div>
diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index 08cc2d22b..e9de65d0f 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -88,7 +88,7 @@ export default function ChatMessage({
                         <ReactMarkdown
                           remarkPlugins={[remarkGfm, remarkMath]}
                           rehypePlugins={[rehypeMathjax]}
-                          className="markdown prose inline-block break-words text-primary dark:prose-invert
+                          className="markdown prose inline-block text-primary word-break-break-word dark:prose-invert
                       sm:w-[30vw] sm:max-w-[30vw] lg:w-[40vw] lg:max-w-[40vw]"
                           components={{
                             pre({ node, ...props }) {
@@ -187,7 +187,7 @@ export default function ChatMessage({
                   }
                 />
               </button>
-              <span className="prose inline-block break-words text-primary dark:prose-invert">
+              <span className="prose inline-block text-primary word-break-break-word dark:prose-invert">
                 {promptOpen
                   ? template?.split("\n")?.map((line, index) => {
                       const regex = /{([^}]+)}/g;
diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx
index 0a998d56e..68759c8be 100644
--- a/src/frontend/src/modals/importModal/buttonBox/index.tsx
+++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx
@@ -96,7 +96,7 @@ export default function ButtonBox({
         <div className="mb-auto mt-auto w-full">
           <h3
             className={classNames(
-              "w-full break-words font-semibold text-background truncate-multiline",
+              "w-full font-semibold text-background truncate-multiline word-break-break-word",
               titleFontSize,
               marginTop
             )}
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index a5f5ecafc..b40614bd6 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -301,13 +301,13 @@
   }
 
   .error-build-message {
-    @apply mt-6 w-96 cursor-pointer rounded-md bg-error-background  p-4 shadow-xl;
+    @apply mt-6 w-96 cursor-pointer rounded-md bg-error-background p-4 shadow-xl;
   }
   .error-build-message-circle {
     @apply alert-icon text-status-red;
   }
   .error-build-text {
-    @apply text-error-foreground;
+    @apply text-error-foreground word-break-break-word;
   }
   .error-build-foreground {
     @apply error-build-text alert-font-size;
@@ -326,7 +326,7 @@
     @apply alert-icon text-status-green;
   }
   .success-alert-message {
-    @apply alert-font-size text-success-foreground;
+    @apply word-break-break-word alert-font-size text-success-foreground;
   }
 
   .card-component-title-display {
@@ -336,7 +336,7 @@
     @apply flex h-7 w-7 items-center justify-center rounded-full text-2xl;
   }
   .card-component-title-size {
-    @apply inline-block w-full flex-1 break-words truncate-doubleline;
+    @apply inline-block w-full flex-1 word-break-break-word truncate-doubleline;
   }
   .card-component-delete-button {
     @apply flex self-start;
@@ -852,11 +852,11 @@
     @apply bg-white text-primary;
   }
   .code-highlight {
-    @apply block max-h-[64vh] w-full overflow-y-hidden break-all border-0 px-3 py-2 text-sm outline-0;
+    @apply block max-h-[64vh] w-full overflow-y-hidden word-break-break-word border-0 px-3 py-2 text-sm outline-0;
   }
 
   .code-nohighlight {
-    @apply block max-h-[70vh] w-full overflow-y-hidden break-all border-0 px-3 py-2 text-sm outline-0;
+    @apply block max-h-[70vh] w-full overflow-y-hidden word-break-break-word border-0 px-3 py-2 text-sm outline-0;
   }
   .form-modal-lockchat {
     @apply form-input block w-full rounded-md border-border p-4 pr-16 custom-scroll focus:border-ring focus:ring-ring sm:text-sm;
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index ea683e844..52330ae92 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -155,7 +155,9 @@ module.exports = {
           overflow: "hidden",
           "text-overflow": "ellipsis",
         },
-
+        ".word-break-break-word": {
+          wordBreak: "break-word",
+        },
         ".arrow-hide": {
           "&::-webkit-inner-spin-button": {
             "-webkit-appearance": "none",