🐛 [#4636] Preventing large values to breaking the table

open-formulieren · Sep 25, 2024 · 11aec57 · 11aec57
1 parent 42f1e1f
commit 11aec57
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git 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
@@ -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>