Merge pull request #183 from open-formulieren/issue/4636-translation-tab-unusable-with-long-values

🐛 [open-formulieren/open-forms#4636] Preventing large values from breaking the table

Author: sergei-maertens

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',
+            },
+          },
+        },
+      },
+    },
+  },
+};

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,10 +54,13 @@ 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">
+            <td
+              colSpan={2}
+              className="offb-i18n-header__label offb-table__col offb-table__col--width-50"
+            >
               <ComponentLabel
                 label={
                   <FormattedMessage
@@ -70,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})}>
@@ -92,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"
@@ -122,7 +126,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 offb-table__content--allow-break"
+                >
                   {(values?.[property] || '-') as string}
                 </div>
               </td>

src/components/builder/table.scss

@@ -0,0 +1,21 @@
+.offb-table {
+  // Ensures that the column widths are respected
+  table-layout: fixed;
+  width: 100%;
+
+  &__content {
+    &--allow-break {
+      overflow-wrap: break-word;
+      hyphens: auto;
+    }
+  }
+
+  &__col {
+    &--width-25 {
+      width: 25%;
+    }
+    &--width-50 {
+      width: 50%;
+    }
+  }
+}

src/components/builder/values/i18n.tsx

@@ -45,10 +45,20 @@ 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 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 offb-table__content--allow-break"
+                >
+                  {value || '-'}
+                </div>
               </td>
               <td>
                 <TextField
@@ -85,14 +95,23 @@ 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 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 offb-table__content--allow-break"
+                >
+                  {description || '-'}
+                </div>
               </td>
 
               <td>