New: Increase width of preferred word keys when editing

Closes #4689
3 years ago · f58a2389bd
parent a97e83ea4d
commit f58a2389bd
2 changed files with 8 additions and 3 deletions
--- 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 {
--- 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"