💄 [open-formulieren/open-forms#4636] Fixed custom table styling

open-formulieren · Oct 8, 2024 · 094a19a · 094a19a
1 parent a8442b1
commit 094a19a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 10 deletions.
diff --git 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
@@ -1,11 +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%;
+    }
+  }
 }
diff --git 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>