feat: make inputs textarea, align copy value button

For #349. The original mission
for this commit was to make the inputs for long English strings be text
areas, but I think making them all text areas is a more elegant
solution.

I also aligned the copy value button and the text area using Flexbox
since it looked even weirder with the old styling and the textareas.

src/client/components/TranslationFormRow.jsx

@@ -6,13 +6,16 @@
  * @author Liam Mulhall <[email protected]>
  */
 
+// Disable this rule so we can import stylesheets.
+/* eslint-disable bad-text */
+
 import { useField, useFormikContext } from 'formik';
 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';
+import '../styles/translation-form.css';
 
 /**
  * This component is a row in the translation table. It has the string key, the English string, and an input for
@@ -39,23 +42,19 @@ const TranslationFormRow = props => {
     setFieldValue( field.name, props.englishString );
   };
 
-  const buttonStyle = {
-    border: '0.5px solid',
-    marginRight: '6px',
-    padding: '1px 3px 1px 2px'
-  };
-
   return (
     <tr>
       <td>{props.stringKey}</td>
       <td>{props.englishString}</td>
 
       {/* Use the spread operator to give the input each of the props in the field object. */}
       <td>
-        <button style={buttonStyle} className='btn btn-light' type='button' onClick={handleCopyButtonClick}>
-          <img src={boxArrowInRight} alt='copy English value to input icon'/>
-        </button>
-        <input {...field} style={inputStyle} dir={direction}/>
+        <div className='copy-value-and-input-container'>
+          <button className='copy-value-button btn btn-light' type='button' onClick={handleCopyButtonClick}>
+            <img src={boxArrowInRight} alt='copy English value to input icon'/>
+          </button>
+          <textarea {...field} style={inputStyle} dir={direction}/>
+        </div>
         <InputErrorMessage fieldKey={props.keyWithoutDots}/>
       </td>
     </tr>

src/client/styles/translation-form.css

@@ -0,0 +1,28 @@
+:root {
+  --default-height: 2em;
+}
+
+textarea {
+  min-height: var(--default-height);
+  height: var(--default-height);
+}
+
+.copy-value-button {
+  border: 1px solid;
+  min-height: var(--default-height);
+  height: var(--default-height);
+}
+
+.copy-value-button:hover {
+
+  /* By default Bootstrap makes the border disappear on hover,
+  so we fix that here. */
+  border: 1px solid;
+}
+
+.copy-value-and-input-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1em;
+}