Add monospace support to textareas

Either we should add monospace support to GlFormTextarea, or create a new component.

For gitlab-org/gitlab#455660, I was looking at migrating this textarea to GlFormTextarea. A naive migration produces something quite different:

Click to expand code diff

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue
index 0a02b1c0e4de..a9e45c7d8d8a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue
@@ -1,5 +1,10 @@
 <script>
+import { GlFormTextarea } from '@gitlab/ui';
+
 export default {
+  components: {
+    GlFormTextarea,
+  },
   props: {
     value: {
       type: String,
@@ -26,15 +31,15 @@ export default {
         </label>
         <slot name="header"></slot>
       </div>
-      <textarea
+      <gl-form-textarea
         :id="inputId"
         :value="value"
-        class="form-control js-gfm-input gl-mb-3 commit-message-edit"
+        class="js-gfm-input gl-mb-3 commit-message-edit"
         dir="auto"
         required="required"
         rows="7"
         @input="$emit('input', $event.target.value)"
-      ></textarea>
+      />
     </div>
   </li>
 </template>

Before	After

Differences include:

• Line height it reduced
• Element height is reduced (i.e., the rows attribute/prop is overridden)
• Font family is sans-serif
• Padding is slightly different

While these can all be fixed by applying various utility classes, that is not a scalable approach as it doesn't guarantee consistency (e.g., different authors might apply different utilities).