From e5ba8af3cecd037bc4bd11a9879ea7064e6f0f85 Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Mon, 29 Jun 2020 21:48:02 -0400
Subject: [PATCH] Fixed: Styling issues in Quality Profile and Release Profiles

---
 .../Components/Form/KeyValueListInputItem.css |  9 +++
 .../Components/Form/KeyValueListInputItem.js  | 63 ++++++++++---------
 .../Profiles/Quality/QualityProfileItem.css   |  1 +
 .../Quality/QualityProfileItemGroup.css       |  1 +
 4 files changed, 46 insertions(+), 28 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 9239d430f..cf20bb547 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}
-        />
-
-        <TextInput
-          className={styles.valueInput}
-          name="value"
-          value={value}
-          placeholder={valuePlaceholder}
-          onChange={this.onValueChange}
-          onFocus={this.onFocus}
-          onBlur={this.onBlur}
-        />
-
-        {
-          !isNew &&
-            <IconButton
-              name={icons.REMOVE}
-              tabIndex={-1}
-              onPress={this.onRemovePress}
-            />
-        }
+        <div className={styles.inputWrapper}>
+          <TextInput
+            className={styles.keyInput}
+            name="key"
+            value={keyValue}
+            placeholder={keyPlaceholder}
+            onChange={this.onKeyChange}
+            onFocus={this.onFocus}
+            onBlur={this.onBlur}
+          />
+        </div>
+
+        <div className={styles.inputWrapper}>
+          <TextInput
+            className={styles.valueInput}
+            name="value"
+            value={value}
+            placeholder={valuePlaceholder}
+            onChange={this.onValueChange}
+            onFocus={this.onFocus}
+            onBlur={this.onBlur}
+          />
+        </div>
+
+        <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;