From 1209e3cefbf1d72de71e87137af5efbc873de335 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Sat, 30 May 2020 10:11:34 -0700
Subject: [PATCH] Fix some styling issues in Quality Profile and Release
 Profiles

---
 .../Components/Form/KeyValueListInputItem.css |  9 +++
 .../Components/Form/KeyValueListInputItem.js  | 59 +++++++++++--------
 .../Profiles/Quality/QualityProfileItem.css   |  1 +
 .../Quality/QualityProfileItemGroup.css       |  1 +
 4 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/frontend/src/Components/Form/KeyValueListInputItem.css b/frontend/src/Components/Form/KeyValueListInputItem.css
index f77ea3470..e136823c2 100644
--- a/frontend/src/Components/Form/KeyValueListInputItem.css
+++ b/frontend/src/Components/Form/KeyValueListInputItem.css
@@ -8,7 +8,16 @@
   }
 }
 
+.inputWrapper {
+  flex: 1 0 0;
+}
+
+.buttonWrapper {
+  flex: 0 0 22px;
+}
+
 .keyInput,
 .valueInput {
+  width: 100%;
   border: none;
 }
diff --git a/frontend/src/Components/Form/KeyValueListInputItem.js b/frontend/src/Components/Form/KeyValueListInputItem.js
index 4e465f3a9..f6b82ed0f 100644
--- a/frontend/src/Components/Form/KeyValueListInputItem.js
+++ b/frontend/src/Components/Form/KeyValueListInputItem.js
@@ -63,34 +63,41 @@ class KeyValueListInputItem extends Component {
 
     return (
       <div className={styles.itemContainer}>
-        <TextInput
-          className={styles.keyInput}
-          name="key"
-          value={keyValue}
-          placeholder={keyPlaceholder}
-          onChange={this.onKeyChange}
-          onFocus={this.onFocus}
-          onBlur={this.onBlur}
-        />
+        <div className={styles.inputWrapper}>
+          <TextInput
+            className={styles.keyInput}
+            name="key"
+            value={keyValue}
+            placeholder={keyPlaceholder}
+            onChange={this.onKeyChange}
+            onFocus={this.onFocus}
+            onBlur={this.onBlur}
+          />
+        </div>
 
-        <TextInput
-          className={styles.valueInput}
-          name="value"
-          value={value}
-          placeholder={valuePlaceholder}
-          onChange={this.onValueChange}
-          onFocus={this.onFocus}
-          onBlur={this.onBlur}
-        />
+        <div className={styles.inputWrapper}>
+          <TextInput
+            className={styles.valueInput}
+            name="value"
+            value={value}
+            placeholder={valuePlaceholder}
+            onChange={this.onValueChange}
+            onFocus={this.onFocus}
+            onBlur={this.onBlur}
+          />
+        </div>
 
-        {
-          !isNew &&
-            <IconButton
-              name={icons.REMOVE}
-              tabIndex={-1}
-              onPress={this.onRemovePress}
-            />
-        }
+        <div className={styles.buttonWrapper}>
+          {
+            isNew ?
+              null :
+              <IconButton
+                name={icons.REMOVE}
+                tabIndex={-1}
+                onPress={this.onRemovePress}
+              />
+          }
+        </div>
       </div>
     );
   }
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css b/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css
index 4e3f4aae5..bf54fedc2 100644
--- a/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css
@@ -48,6 +48,7 @@
   composes: buton from '~Components/Link/IconButton.css';
 
   display: flex;
+  align-items: center;
   justify-content: center;
   flex-shrink: 0;
   margin-right: 5px;
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileItemGroup.css b/frontend/src/Settings/Profiles/Quality/QualityProfileItemGroup.css
index 613a9b2d3..dad463b28 100644
--- a/frontend/src/Settings/Profiles/Quality/QualityProfileItemGroup.css
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfileItemGroup.css
@@ -74,6 +74,7 @@
   composes: buton from '~Components/Link/IconButton.css';
 
   display: flex;
+  align-items: center;
   justify-content: center;
   flex-shrink: 0;
   margin-right: 5px;