From 11aec57049ca7fe21e19c3195886e3f6f9aed3ab Mon Sep 17 00:00:00 2001
From: robinvandermolen <robin@maykinmedia.nl>
Date: Wed, 25 Sep 2024 15:59:32 +0200
Subject: [PATCH] :bug: [#4636] Preventing large values to breaking the table

---
 src/components/builder/i18n.tsx        |  5 ++++-
 src/components/builder/values/i18n.tsx | 14 ++++++++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/builder/i18n.tsx b/src/components/builder/i18n.tsx
index 767ca12d..2f98844e 100644
--- a/src/components/builder/i18n.tsx
+++ b/src/components/builder/i18n.tsx
@@ -122,7 +122,10 @@ export function ComponentTranslations<S extends AnyComponentSchema>({
                 </span>
               </td>
               <td>
-                <div aria-describedby={`component-translation-property-${property}`}>
+                <div
+                  aria-describedby={`component-translation-property-${property}`}
+                  style={{wordBreak: 'break-word'}}
+                >
                   {(values?.[property] || '-') as string}
                 </div>
               </td>
diff --git a/src/components/builder/values/i18n.tsx b/src/components/builder/values/i18n.tsx
index 64f6e62d..43133cc2 100644
--- a/src/components/builder/values/i18n.tsx
+++ b/src/components/builder/values/i18n.tsx
@@ -45,10 +45,14 @@ export function ValuesTranslations<S>({name, withOptionDescription}: ValuesTrans
           <>
             <tr key={`option-${index}`}>
               <td>
-                <span id={`option-${index}-label`}>{label}</span>
+                <span id={`option-${index}-label`} style={{wordBreak: 'break-word'}}>
+                  {label}
+                </span>
               </td>
               <td>
-                <div aria-describedby={`option-${index}-label`}>{value || '-'}</div>
+                <div aria-describedby={`option-${index}-label`} style={{wordBreak: 'break-word'}}>
+                  {value || '-'}
+                </div>
               </td>
               <td>
                 <TextField
@@ -85,14 +89,16 @@ export function ValuesTranslations<S>({name, withOptionDescription}: ValuesTrans
                     description="Label for option description location"
                     defaultMessage="Option description (<option></option>)"
                     values={{
-                      option: () => <code>{value || '-'}</code>,
+                      option: () => <code style={{wordBreak: 'break-word'}}>{value || '-'}</code>,
                     }}
                   />
                 </span>
               </td>
 
               <td>
-                <div aria-describedby={`option-${index}-label`}>{description || '-'}</div>
+                <div aria-describedby={`option-${index}-label`} style={{wordBreak: 'break-word'}}>
+                  {description || '-'}
+                </div>
               </td>
 
               <td>