🐛 [open-formulieren/open-forms#4636] Preventing large values to break…

…ing the table
open-formulieren · Oct 7, 2024 · a8442b1 · a8442b1
1 parent 42f1e1f
commit a8442b1
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 6 deletions.
diff --git a/src/components/builder/i18n.tsx b/src/components/builder/i18n.tsx
@@ -12,6 +12,7 @@ import {AnyComponentSchema} from '@/types/schemas';
 import {Component, TextField} from '../formio';
 import ComponentLabel from '../formio/component-label';
 import './i18n.scss';
+import './table.scss';
 
 type ExtractTranslatableProperties<T> = T extends OFExtensions<infer TK> ? TK : never;
 type StringValueProperties<S> = S extends AnyComponentSchema
@@ -53,7 +54,7 @@ export function ComponentTranslations<S extends AnyComponentSchema>({
 
   return (
     <Component type="datagrid">
-      <table className="table table-bordered">
+      <table className="table table-bordered offb-table">
         <thead>
           <tr className="offb-i18n-header">
             <td colSpan={2} className="offb-i18n-header__label">
@@ -122,7 +123,10 @@ export function ComponentTranslations<S extends AnyComponentSchema>({
                 </span>
               </td>
               <td>
-                <div aria-describedby={`component-translation-property-${property}`}>
+                <div
+                  aria-describedby={`component-translation-property-${property}`}
+                  className="offb-table__content--allow-break"
+                >
                   {(values?.[property] || '-') as string}
                 </div>
               </td>

diff --git a/src/components/builder/table.scss b/src/components/builder/table.scss
@@ -0,0 +1,11 @@
+.offb-table {
+  // Ensures that the column widths are respected
+  table-layout: fixed;
+
+  &__content {
+    &--allow-break {
+      overflow-wrap: break-word;
+      hyphens: auto;
+    }
+  }
+}
diff --git a/src/components/builder/values/i18n.tsx b/src/components/builder/values/i18n.tsx
@@ -7,6 +7,7 @@ import {TextArea, TextField} from '@/components/formio';
 import {PathsForValueType} from '@/types';
 
 import {ComponentTranslationsContext} from '../i18n';
+import '../table.scss';
 
 export interface ValuesTranslationsProps<S> {
   /**
@@ -45,10 +46,17 @@ export function ValuesTranslations<S>({name, withOptionDescription}: ValuesTrans
           <>
             <tr key={`option-${index}`}>
               <td>
-                <span id={`option-${index}-label`}>{label}</span>
+                <span id={`option-${index}-label`} className="offb-table__content--allow-break">
+                  {label}
+                </span>
               </td>
               <td>
-                <div aria-describedby={`option-${index}-label`}>{value || '-'}</div>
+                <div
+                  aria-describedby={`option-${index}-label`}
+                  className="offb-table__content--allow-break"
+                >
+                  {value || '-'}
+                </div>
               </td>
               <td>
                 <TextField
@@ -85,14 +93,21 @@ 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 className="offb-table__content--allow-break">{value || '-'}</code>
+                      ),
                     }}
                   />
                 </span>
               </td>
 
               <td>
-                <div aria-describedby={`option-${index}-label`}>{description || '-'}</div>
+                <div
+                  aria-describedby={`option-${index}-label`}
+                  className="offb-table__content--allow-break"
+                >
+                  {description || '-'}
+                </div>
               </td>
 
               <td>