[dataquery] fixes oversized table head element

jsx/DataTable.d.ts

@@ -5,7 +5,7 @@ type TableRow = (string|null)[]
 
 type Field = {
     show: boolean
-    label: string
+    label: string | ReactNode
 }
 
 type hideOptions = {

modules/dataquery/jsx/getdictionarydescription.tsx

@@ -1,5 +1,17 @@
 import {FullDictionary} from './types';
 
+/**
+ * Parses string to remove HTML tags and return raw text
+ *
+ * @param {string} html - input string
+ * @returns {string} - parsed string
+ */
+function stripHTML(html: string): string {
+  if (!html) return '';
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  return doc.body.textContent || html.replace(/<\/?[a-zA-Z][^>]*>?/gm, '');
+}
+
 /**
  * Get the dictionary for a given term
  *
@@ -23,7 +35,8 @@ function getDictionaryDescription(
     return fieldname;
   }
 
-  return dict[module][category][fieldname].description;
+  const desc = dict[module][category][fieldname].description;
+  return stripHTML(desc);
 }
 
 export default getDictionaryDescription;

modules/dataquery/jsx/viewdata.tsx

@@ -384,7 +384,10 @@ function ViewData(props: {
           rowNumLabel={t('Row Number')}
           fields={organizedData.headers.map(
             (val: string) => {
-              return {show: true, label: val};
+              return {
+                show: true,
+                label: <div className="header-text">{val}</div>,
+              };
             })
           }
           data={organizedData.data}
@@ -436,7 +439,21 @@ function ViewData(props: {
       }
     />
     : <div />);
-  return <div>
+  return <div className='dataquery-view-container'>
+    <style>{`
+      .dataquery-view-container .header-text {
+        max-height: 250px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 12;
+        display: -webkit-box;
+      }
+      .dataquery-view-container table th,
+      .dataquery-view-container table td {
+        min-width: 150px;
+      }
+    `}</style>
     <SelectElement
       name='headerdisplay'
       options={{