Fix comments

Author: sri1873

start-client/src/components/common/builder/Fields.js

@@ -109,7 +109,7 @@ function Fields({
               )}
             </Control>
             <Control text='Project Metadata'>
-              <div className="control control-inline">
+              <div className="control-row">
                 <FieldInput
                   id='input-group'
                   value={get(values, 'meta.group')}

start-client/src/styles/_main.scss

@@ -278,7 +278,7 @@ hr.divider {
 // Control
 
 .control {
-  padding: 0.45rem 0;
+  padding: 0.6rem 0;
   .label {
     font-weight: 600;
     font-size: $spring-font-size + 2;
@@ -302,7 +302,20 @@ hr.divider {
   input {
     color: $light-color;
     background: $light-background;
-    max-width: 520px;
+    max-width: 550px;
+  }
+}
+.control-row{
+  display: flex;
+  .control-inline{
+    max-width: 340px;
+    flex: 1 1 0;
+  }
+  .control-inline:nth-child(2) label {
+    flex: 70px 0;
+  }
+  input{
+    max-width: 250px;
   }
 }
 
@@ -572,7 +585,7 @@ button.button {
   left: 75px;
   .actions-container {
     background: $light-background-seconday;
-    padding: 20px 0.5rem;
+    padding: 18px 0.5rem;
     margin: 0 auto;
     max-width: $spring-max-width - (82 * 2);
     height: 50px;

start-client/src/styles/_responsive.scss

@@ -80,6 +80,18 @@
   .placeholder-button-download {
     width: 144.13px;
   }
+  .control-row {
+    display: block;
+    .control-inline{
+      max-width: none;
+    }
+    .control-inline:nth-child(2) label,label{
+      flex: 110px 0 ;
+    }
+    input {
+      max-width: 520px;
+    }
+  }
 }
 
 .not-mobile {
@@ -278,7 +290,7 @@
   hr.divider {
     display: none;
   }
-  .control-inline,
+  .control-inline,.control-row,
   .control-placeholder {
     display: block;
     label,
@@ -292,4 +304,7 @@
       margin-left: 0;
     }
   }
+  .control-row{
+    .control-inline{max-width: none;}
+  } 
 }