From a8442b1d0b06d66070c0cdcc2e423f5302111186 Mon Sep 17 00:00:00 2001
From: robinvandermolen <robin@maykinmedia.nl>
Date: Wed, 25 Sep 2024 15:59:32 +0200
Subject: [PATCH 1/4] :bug: [open-formulieren/open-forms#4636] Preventing large
 values to breaking the table

---
 src/components/builder/i18n.tsx        |  8 ++++++--
 src/components/builder/table.scss      | 11 +++++++++++
 src/components/builder/values/i18n.tsx | 23 +++++++++++++++++++----
 3 files changed, 36 insertions(+), 6 deletions(-)
 create mode 100644 src/components/builder/table.scss

diff --git a/src/components/builder/i18n.tsx b/src/components/builder/i18n.tsx
index 767ca12d..a6c3022d 100644
--- 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
new file mode 100644
index 00000000..d7961629
--- /dev/null
+++ 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
index 64f6e62d..d1cb52e2 100644
--- 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>

From 094a19a920be3e3c44518ebdb924fef1bfdb0df0 Mon Sep 17 00:00:00 2001
From: robinvandermolen <robin@maykinmedia.nl>
Date: Tue, 8 Oct 2024 14:23:10 +0200
Subject: [PATCH 2/4] :lipstick: [open-formulieren/open-forms#4636] Fixed
 custom table styling

---
 src/components/builder/i18n.tsx        | 15 +++++++++------
 src/components/builder/table.scss      | 10 ++++++++++
 src/components/builder/values/i18n.tsx | 13 +++++++++----
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/components/builder/i18n.tsx b/src/components/builder/i18n.tsx
index a6c3022d..50b10d85 100644
--- a/src/components/builder/i18n.tsx
+++ b/src/components/builder/i18n.tsx
@@ -57,7 +57,10 @@ export function ComponentTranslations<S extends AnyComponentSchema>({
       <table className="table table-bordered offb-table">
         <thead>
           <tr className="offb-i18n-header">
-            <td colSpan={2} className="offb-i18n-header__label">
+            <td
+              colSpan={2}
+              className="offb-i18n-header__label offb-table__col offb-table__col--width-50"
+            >
               <ComponentLabel
                 label={
                   <FormattedMessage
@@ -71,7 +74,7 @@ export function ComponentTranslations<S extends AnyComponentSchema>({
                 })}
               />
             </td>
-            <td className="offb-i18n-header__tab-container">
+            <td className="offb-i18n-header__tab-container offb-table__col offb-table__col--width-50">
               <ul className={`nav nav-tabs offb-i18n-header__tabs`}>
                 {supportedLanguageCodes.map(code => (
                   <li key={code} className={clsx('nav-item', {active: code === activeLanguage})}>
@@ -93,19 +96,19 @@ export function ComponentTranslations<S extends AnyComponentSchema>({
           </tr>
 
           <tr>
-            <th style={{width: '20%'}}>
+            <th className="offb-table__col offb-table__col--width-25">
               <FormattedMessage
                 description="Translations: location column header"
                 defaultMessage="Location"
               />
             </th>
-            <th style={{width: '35%'}}>
+            <th className="offb-table__col offb-table__col--width-25">
               <FormattedMessage
                 description="Translations: property column header"
                 defaultMessage="Value"
               />
             </th>
-            <th style={{borderTop: 'none'}}>
+            <th className="offb-table__col offb-table__col--width-50">
               <FormattedMessage
                 description="Translations: translation column header"
                 defaultMessage="Translations"
@@ -125,7 +128,7 @@ export function ComponentTranslations<S extends AnyComponentSchema>({
               <td>
                 <div
                   aria-describedby={`component-translation-property-${property}`}
-                  className="offb-table__content--allow-break"
+                  className="offb-table__content offb-table__content--allow-break"
                 >
                   {(values?.[property] || '-') as string}
                 </div>
diff --git a/src/components/builder/table.scss b/src/components/builder/table.scss
index d7961629..1ae04bd8 100644
--- a/src/components/builder/table.scss
+++ b/src/components/builder/table.scss
@@ -1,6 +1,7 @@
 .offb-table {
   // Ensures that the column widths are respected
   table-layout: fixed;
+  width: 100%;
 
   &__content {
     &--allow-break {
@@ -8,4 +9,13 @@
       hyphens: auto;
     }
   }
+
+  &__col {
+    &--width-25 {
+      width: 25%;
+    }
+    &--width-50 {
+      width: 50%;
+    }
+  }
 }
diff --git a/src/components/builder/values/i18n.tsx b/src/components/builder/values/i18n.tsx
index d1cb52e2..9a0af867 100644
--- a/src/components/builder/values/i18n.tsx
+++ b/src/components/builder/values/i18n.tsx
@@ -46,14 +46,17 @@ export function ValuesTranslations<S>({name, withOptionDescription}: ValuesTrans
           <>
             <tr key={`option-${index}`}>
               <td>
-                <span id={`option-${index}-label`} className="offb-table__content--allow-break">
+                <span
+                  id={`option-${index}-label`}
+                  className="offb-table__content offb-table__content--allow-break"
+                >
                   {label}
                 </span>
               </td>
               <td>
                 <div
                   aria-describedby={`option-${index}-label`}
-                  className="offb-table__content--allow-break"
+                  className="offb-table__content offb-table__content--allow-break"
                 >
                   {value || '-'}
                 </div>
@@ -94,7 +97,9 @@ export function ValuesTranslations<S>({name, withOptionDescription}: ValuesTrans
                     defaultMessage="Option description (<option></option>)"
                     values={{
                       option: () => (
-                        <code className="offb-table__content--allow-break">{value || '-'}</code>
+                        <code className="offb-table__content offb-table__content--allow-break">
+                          {value || '-'}
+                        </code>
                       ),
                     }}
                   />
@@ -104,7 +109,7 @@ export function ValuesTranslations<S>({name, withOptionDescription}: ValuesTrans
               <td>
                 <div
                   aria-describedby={`option-${index}-label`}
-                  className="offb-table__content--allow-break"
+                  className="offb-table__content offb-table__content--allow-break"
                 >
                   {description || '-'}
                 </div>

From 22a5ab3d7f3b572a27c62aa83ffa005516c5fc92 Mon Sep 17 00:00:00 2001
From: robinvandermolen <robin@maykinmedia.nl>
Date: Tue, 8 Oct 2024 14:37:08 +0200
Subject: [PATCH 3/4] :truck: [open-formulieren/open-forms#4636] Moved styling
 import to library index

---
 src/components/builder/i18n.tsx        | 1 -
 src/components/builder/index.ts        | 2 ++
 src/components/builder/values/i18n.tsx | 1 -
 3 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/builder/i18n.tsx b/src/components/builder/i18n.tsx
index 50b10d85..b57d6ec4 100644
--- a/src/components/builder/i18n.tsx
+++ b/src/components/builder/i18n.tsx
@@ -12,7 +12,6 @@ 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
diff --git a/src/components/builder/index.ts b/src/components/builder/index.ts
index ae81440f..c329d97a 100644
--- a/src/components/builder/index.ts
+++ b/src/components/builder/index.ts
@@ -4,6 +4,8 @@
  * These components are commonly re-used in the component edit form, built using the
  * formio component 'primitives'.
  */
+import './table.scss';
+
 export {default as Label} from './label';
 export {default as Description} from './description';
 export {default as Tooltip} from './tooltip';
diff --git a/src/components/builder/values/i18n.tsx b/src/components/builder/values/i18n.tsx
index 9a0af867..4c65efba 100644
--- a/src/components/builder/values/i18n.tsx
+++ b/src/components/builder/values/i18n.tsx
@@ -7,7 +7,6 @@ import {TextArea, TextField} from '@/components/formio';
 import {PathsForValueType} from '@/types';
 
 import {ComponentTranslationsContext} from '../i18n';
-import '../table.scss';
 
 export interface ValuesTranslationsProps<S> {
   /**

From 4b009bb1e703ead50f7a41597b175c9e1f87b19a Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Thu, 10 Oct 2024 12:16:37 +0200
Subject: [PATCH 4/4] :white_check_mark: [open-formulieren/open-forms#4636] Add
 story for text wrapping in translations table

---
 src/components/builder/i18n.stories.tsx | 24 ++++++++++++++++++++++++
 src/components/builder/i18n.tsx         |  1 +
 src/components/builder/index.ts         |  2 --
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/builder/i18n.stories.tsx b/src/components/builder/i18n.stories.tsx
index 33ebb568..781de925 100644
--- a/src/components/builder/i18n.stories.tsx
+++ b/src/components/builder/i18n.stories.tsx
@@ -3,6 +3,7 @@ import {expect, userEvent, waitFor, within} from '@storybook/test';
 import {Formik} from 'formik';
 
 import {TextField} from '@/components/formio';
+import {withFormik} from '@/sb-decorators';
 
 import {ComponentTranslations} from './i18n';
 
@@ -108,3 +109,26 @@ export const Default: Story = {
     expect(translationField2).toBeNull();
   },
 };
+
+export const LongStringsWrap: StoryObj<typeof ComponentTranslations<DummyComponent>> = {
+  decorators: [withFormik],
+  args: {
+    propertyLabels: {
+      label: 'Label',
+    },
+  },
+  parameters: {
+    formik: {
+      initialValues: {
+        label: Array(100).fill('a').join(''),
+        openForms: {
+          translations: {
+            nl: {
+              label: 'Insgelijks',
+            },
+          },
+        },
+      },
+    },
+  },
+};
diff --git a/src/components/builder/i18n.tsx b/src/components/builder/i18n.tsx
index b57d6ec4..50b10d85 100644
--- 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
diff --git a/src/components/builder/index.ts b/src/components/builder/index.ts
index c329d97a..ae81440f 100644
--- a/src/components/builder/index.ts
+++ b/src/components/builder/index.ts
@@ -4,8 +4,6 @@
  * These components are commonly re-used in the component edit form, built using the
  * formio component 'primitives'.
  */
-import './table.scss';
-
 export {default as Label} from './label';
 export {default as Description} from './description';
 export {default as Tooltip} from './tooltip';