💄 [open-formulieren/open-forms#4636] Moved styling to scss file

open-formulieren · Oct 7, 2024 · 25543de · 25543de
1 parent 11aec57
commit 25543de
Show file tree

Hide file tree

Showing 3 changed files with 27 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">
@@ -124,7 +125,7 @@ export function ComponentTranslations<S extends AnyComponentSchema>({
               <td>
                 <div
                   aria-describedby={`component-translation-property-${property}`}
-                  style={{wordBreak: 'break-word'}}
+                  className="offb-table__content--allow-break"
                 >
                   {(values?.[property] || '-') as string}
                 </div>

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,12 +46,15 @@ export function ValuesTranslations<S>({name, withOptionDescription}: ValuesTrans
           <>
             <tr key={`option-${index}`}>
               <td>
-                <span id={`option-${index}-label`} style={{wordBreak: 'break-word'}}>
+                <span id={`option-${index}-label`} className="offb-table__content--allow-break">
                   {label}
                 </span>
               </td>
               <td>
-                <div aria-describedby={`option-${index}-label`} style={{wordBreak: 'break-word'}}>
+                <div
+                  aria-describedby={`option-${index}-label`}
+                  className="offb-table__content--allow-break"
+                >
                   {value || '-'}
                 </div>
               </td>
@@ -89,14 +93,19 @@ export function ValuesTranslations<S>({name, withOptionDescription}: ValuesTrans
                     description="Label for option description location"
                     defaultMessage="Option description (<option></option>)"
                     values={{
-                      option: () => <code style={{wordBreak: 'break-word'}}>{value || '-'}</code>,
+                      option: () => (
+                        <code className="offb-table__content--allow-break">{value || '-'}</code>
+                      ),
                     }}
                   />
                 </span>
               </td>
 
               <td>
-                <div aria-describedby={`option-${index}-label`} style={{wordBreak: 'break-word'}}>
+                <div
+                  aria-describedby={`option-${index}-label`}
+                  className="offb-table__content--allow-break"
+                >
                   {description || '-'}
                 </div>
               </td>