[CORE-558] Wrap long EntityNames for better readability (#5367)

Author: kevinmarete

packages/components/src/TooltipTrigger.tsx

@@ -19,6 +19,8 @@ const styles = {
     boxShadow: '0 1px 3px 2px rgba(0,0,0,0.3)',
     lineHeight: 1.5,
     pointerEvents: 'none',
+    whiteSpace: 'pre-line',
+    wordBreak: 'break-word',
   },
   notch: {
     position: 'absolute',

src/pages/workspaces/workspace/submissionHistory/SubmissionDetails.js

@@ -468,6 +468,9 @@ const SubmissionDetails = _.flow(
    */
   const hasWorkflowCostEstimates = _.some((w) => !('costType' in w) || w.costType === 'Estimated', workflows);
 
+  // Style for text wrapping
+  const wrapStyle = { whiteSpace: 'normal', overflowWrap: 'break-word' };
+
   /*
    * Page render
    */
@@ -553,7 +556,7 @@ const SubmissionDetails = _.flow(
               makeSection('Total Run Cost', [
                 typeof cost === 'number' ? `${Utils.formatUSD(cost)} ${hasWorkflowCostEstimates ? 'Estimated' : 'Actual'} cost` : 'N/A',
               ]),
-              makeSection('Data Entity', [div([entityName]), div([entityType])]),
+              makeSection('Data Entity', [div({ style: wrapStyle }, [entityName]), div({ style: wrapStyle }, [entityType])]),
               makeSection('Submission ID', [
                 h(Link, { href: bucketBrowserUrl(submissionRoot.replace('gs://', '')), ...Utils.newTabLinkProps }, submissionId),
                 h(ClipboardButton, {