From f58a2389bd9b4dc9f45524170060ffc87bdfd959 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Fri, 22 Oct 2021 17:44:50 -0700
Subject: [PATCH] New: Increase width of preferred word keys when editing

Closes #4689
---
 frontend/src/Components/Form/KeyValueListInputItem.css | 7 ++++++-
 frontend/src/Components/Form/KeyValueListInputItem.js  | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Components/Form/KeyValueListInputItem.css b/frontend/src/Components/Form/KeyValueListInputItem.css
index e136823c2..7365e9f1d 100644
--- a/frontend/src/Components/Form/KeyValueListInputItem.css
+++ b/frontend/src/Components/Form/KeyValueListInputItem.css
@@ -8,8 +8,13 @@
   }
 }
 
-.inputWrapper {
+.keyInputWrapper {
+  flex: 6 0 0;
+}
+
+.valueInputWrapper {
   flex: 1 0 0;
+  min-width: 40px;
 }
 
 .buttonWrapper {
diff --git a/frontend/src/Components/Form/KeyValueListInputItem.js b/frontend/src/Components/Form/KeyValueListInputItem.js
index f6b82ed0f..81b46d7d6 100644
--- a/frontend/src/Components/Form/KeyValueListInputItem.js
+++ b/frontend/src/Components/Form/KeyValueListInputItem.js
@@ -63,7 +63,7 @@ class KeyValueListInputItem extends Component {
 
     return (
       <div className={styles.itemContainer}>
-        <div className={styles.inputWrapper}>
+        <div className={styles.keyInputWrapper}>
           <TextInput
             className={styles.keyInput}
             name="key"
@@ -75,7 +75,7 @@ class KeyValueListInputItem extends Component {
           />
         </div>
 
-        <div className={styles.inputWrapper}>
+        <div className={styles.valueInputWrapper}>
           <TextInput
             className={styles.valueInput}
             name="value"