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,6 +63,7 @@ class KeyValueListInputItem extends Component {
 
     return (
       <div className={styles.itemContainer}>
+        <div className={styles.inputWrapper}>
           <TextInput
             className={styles.keyInput}
             name="key"
@@ -72,7 +73,9 @@ class KeyValueListInputItem extends Component {
             onFocus={this.onFocus}
             onBlur={this.onBlur}
           />
+        </div>
 
+        <div className={styles.inputWrapper}>
           <TextInput
             className={styles.valueInput}
             name="value"
@@ -82,9 +85,12 @@ class KeyValueListInputItem extends Component {
             onFocus={this.onFocus}
             onBlur={this.onBlur}
           />
+        </div>
 
+        <div className={styles.buttonWrapper}>
           {
-          !isNew &&
+            isNew ?
+              null :
               <IconButton
                 name={icons.REMOVE}
                 tabIndex={-1}
@@ -92,6 +98,7 @@ class KeyValueListInputItem extends Component {
               />
           }
         </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;