feat: make columns have fixed width

For #356.

src/client/components/TranslationFormRow.jsx

@@ -11,6 +11,8 @@ import React, { useContext } from 'react';
 import InputErrorMessage from './InputErrorMessage.jsx';
 import { LocaleInfoContext } from './RosettaRoutes.jsx';
 import boxArrowInRight from '../img/box-arrow-in-right.svg';
+// eslint-disable-next-line bad-text
+import '../styles/table.css';
 
 /**
  * This component is a row in the translation table. It has the string key, the English string, and an input for

src/client/jsx/getSortedTranslationReportRows.jsx

@@ -11,6 +11,8 @@ import { Link } from 'react-router-dom';
 import StatsInfoButton from '../components/StatsInfoButton.jsx';
 import alertErrorMessage from '../js/alertErrorMessage.js';
 import SortDirectionEnum from '../js/SortDirectionEnum.js';
+// eslint-disable-next-line bad-text
+import '../styles/table.css';
 
 /**
  * Return an array of translation report objects (i.e. stats used to make translation report rows) that have
@@ -143,6 +145,10 @@ const getSortedTranslationReportRows = (
     sortKeys
   );
 
+  const tdStyle = {
+    width: '30%'
+  };
+
   // Create the array of JSX to render in the translation report.
   const translationReportJsx = [];
   for ( const item of sortedData ) {
@@ -154,8 +160,8 @@ const getSortedTranslationReportRows = (
 
     translationReportJsx.push(
       <tr key={item.simName}>
-        <td><Link to={`/translate/${locale}/${item.simName}`}>{item.simTitle}</Link>{pendingUpdateMessage}</td>
-        <td>
+        <td style={tdStyle}><Link to={`/translate/${locale}/${item.simName}`}>{item.simTitle}</Link>{pendingUpdateMessage}</td>
+        <td style={tdStyle}>
           <StatsInfoButton reportObject={item}/>
           {item.percentTotal}% ({item.totalTranslatedStrings} of {item.totalStrings})
         </td>

src/client/jsx/getTranslationReportRows.jsx

@@ -10,6 +10,8 @@
 import { Link } from 'react-router-dom';
 import StatsInfoButton from '../components/StatsInfoButton.jsx';
 import getSortedTranslationReportRows from './getSortedTranslationReportRows.jsx';
+// eslint-disable-next-line bad-text
+import '../styles/table.css';
 
 /**
  * Return an array of translation report table rows, i.e. return an array of JSX. These rows are put into the

src/client/styles/table.css

@@ -0,0 +1,10 @@
+:root {
+  --row-width: 450px;
+}
+
+td {
+  min-width: var(--row-width);
+  max-width: var(--row-width);
+  inline-size: var(--row-width);
+  overflow-wrap: break-word;
+}