trying to add a wrapper around secret field to center the eye icon

increased max-height of textarea to 100px and increased
padding from the right side to 40px from 36px to appear less crowded

Author: fdrab

modules/st2-auto-form/style.css

@@ -188,12 +188,12 @@
     overflow-x: hidden;
     overflow-y: scroll;
 
-    padding: 9px 36px 9px 9px;
+    padding: 9px 40px 9px 9px;
 
     resize: none;
     cursor: text;
     word-wrap: break-word;
-    max-height:50px;
+    max-height:100px;
     &::-webkit-scrollbar {
       width: 13px;
       height: 13px;

modules/st2-auto-form/wrappers.js

@@ -187,13 +187,25 @@ export class TextFieldWrapper extends React.Component {
       onClick: () => this.handleVisibilityToggle(),
     };
 
+    const blockProps = {
+      className: 'st2-auto-form__wrapper-block',
+    };
+
     const line = (
       <div className='st2-auto-form__line'>
         <Label className={this.props.labelClass || 'st2-auto-form__text-field'}>
           <Icon name={this.props.icon} />
           <Title {...this.props} />
-          { this.props.spec && this.props.spec.secret && <Button {...buttonProps} />}
-          { this.props.children }
+          { 
+            this.props.spec && this.props.spec.secret 
+            ? 
+            <div {...blockProps}>
+              <Button {...buttonProps} />
+              { this.props.children }
+            </div> 
+            :
+            this.props.children
+          }
           <ErrorMessage>{ this.props.invalid }</ErrorMessage>
         </Label>
         <Description {...this.props} />