Fixed: Styling issues in Quality Profile and Release Profiles

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;
 }

frontend/src/Components/Form/KeyValueListInputItem.js

@@ -63,34 +63,41 @@ class KeyValueListInputItem extends Component {
 
     return (
       <div className={styles.itemContainer}>
-        <TextInput
+        <div className={styles.inputWrapper}>
-          className={styles.keyInput}
+          <TextInput
-          name="key"
+            className={styles.keyInput}
-          value={keyValue}
+            name="key"
-          placeholder={keyPlaceholder}
+            value={keyValue}
-          onChange={this.onKeyChange}
+            placeholder={keyPlaceholder}
-          onFocus={this.onFocus}
+            onChange={this.onKeyChange}
-          onBlur={this.onBlur}
+            onFocus={this.onFocus}
-        />
+            onBlur={this.onBlur}
-
+          />
-        <TextInput
+        </div>
-          className={styles.valueInput}
+
-          name="value"
+        <div className={styles.inputWrapper}>
-          value={value}
+          <TextInput
-          placeholder={valuePlaceholder}
+            className={styles.valueInput}
-          onChange={this.onValueChange}
+            name="value"
-          onFocus={this.onFocus}
+            value={value}
-          onBlur={this.onBlur}
+            placeholder={valuePlaceholder}
-        />
+            onChange={this.onValueChange}
-
+            onFocus={this.onFocus}
-        {
+            onBlur={this.onBlur}
-          !isNew &&
+          />
-            <IconButton
+        </div>
-              name={icons.REMOVE}
+
-              tabIndex={-1}
+        <div className={styles.buttonWrapper}>
-              onPress={this.onRemovePress}
+          {
-            />
+            isNew ?
-        }
+              null :
+              <IconButton
+                name={icons.REMOVE}
+                tabIndex={-1}
+                onPress={this.onRemovePress}
+              />
+          }
+        </div>
       </div>
     );
   }

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;

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;