Add JS for responsive tables in long text fields

config/install/localgov_base.settings.yml

@@ -7,3 +7,4 @@ localgov_base_header_behaviour: 'default'
 localgov_base_localgov_guides_stacked_heading: FALSE
 localgov_base_localgov_guides_vertical_navigation: TRUE
 localgov_base_mobile_breakpoint_js: '768'
+localgov_base_responsive_wysiwyg_tables: TRUE

config/schema/localgov_base.schema.yml

@@ -36,3 +36,8 @@ localgov_base.settings:
       label: 'Mobile breakpoint for JS'
       description: 'The mobile breakpoint for JS. This is used to determine when to apply mobile styles.'
       default_value: '768'
+    localgov_base_responsive_wysiwyg_tables:
+      type: boolean
+      label: 'Responsive WYSIWYG tables'
+      description: 'Choose whether to make WYSIWYG tables responsive or not.'
+      default_value: TRUE

css/components/responsive-tables.css

@@ -0,0 +1,3 @@
+.lgd-responsive-table {
+  overflow-y: auto;
+}

js/responsive-tables.js

@@ -0,0 +1,35 @@
+/**
+ * @file JS file for the responsive tables component.
+ */
+
+(function responsiveTablesScript(Drupal, once) {
+  Drupal.behaviors.responsiveTables = {
+    attach(context) {
+      const tables = [];
+      const tablesInTextWithSummaryFields = once(
+        'allResponsiveTables',
+        '.field--type-text-with-summary table',
+        context,
+      );
+      const tablesInTextLongFields = once(
+        'responsiveTables',
+        '.field--type-text-long table',
+        context,
+      );
+
+      // Push all tables into the tables array.
+      tables.push(...tablesInTextWithSummaryFields);
+      tables.push(...tablesInTextLongFields);
+      tables.forEach((table) => {
+        // Clone the table to avoid modifying the original.
+        const clonedTable = table.cloneNode(true);
+        // Add a div around the cloned table.
+        const wrapper = document.createElement('div');
+        wrapper.classList.add('lgd-responsive-table');
+        wrapper.appendChild(clonedTable);
+        // Replace the original table with the wrapper.
+        table.parentNode.replaceChild(wrapper, table);
+      });
+    },
+  };
+})(Drupal, once);

localgov_base.libraries.yml

@@ -363,3 +363,13 @@ accordion:
   css:
     theme:
       css/components/accordion.css: {}
+
+responsive-tables:
+  css:
+    theme:
+      css/components/responsive-tables.css: {}
+  js:
+    js/responsive-tables.js: {}
+  dependencies:
+    - core/drupal
+    - core/once

localgov_base.theme

@@ -99,6 +99,14 @@ function localgov_base_form_system_theme_settings_alter(&$form, FormStateInterfa
     ],
   ];
 
+  $form['localgov_base_responsive_wysiwyg_tables'] = [
+    '#type'          => 'checkbox',
+    '#title'         => t('Make WYSIWYG tables responsive.'),
+    '#default_value' => theme_get_setting('localgov_base_responsive_wysiwyg_tables'),
+    '#description'   => t('Places tables inserted via WYSIWYG into a responsive container, so they can scroll horizontally on small screens.'),
+    '#default_value' => theme_get_setting('localgov_base_responsive_wysiwyg_tables') ? theme_get_setting('localgov_base_responsive_wysiwyg_tables') : FALSE,
+  ];
+
   $form['#validate'][] = 'localgov_base_theme_settings_validate';
 }
 
@@ -147,6 +155,13 @@ function localgov_base_preprocess_html(&$variables): void {
       }
     }
   }
+
+  // Add the 'localgov_base_responsive_wysiwyg_tables' value to drupalSettings.
+  if (!empty(theme_get_setting('localgov_base_responsive_wysiwyg_tables'))) {
+    if (theme_get_setting('localgov_base_responsive_wysiwyg_tables') === TRUE || 1) {
+      $variables['#attached']['library'][] = 'localgov_base/responsive-tables';
+    }
+  }
 }
 
 /**