full-width form inputs

dashboard/src/components/values-form/InputRow.tsx

@@ -63,13 +63,21 @@ const Required = styled.div`
 `;
 
 const Unit = styled.div`
-  margin-left: 8px;
+  padding: 0 10px;
+  background: #ffffff05;
+  height: 35px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-left: 1px solid #ffffff55;
 `;
 
 const InputWrapper = styled.div`
   display: flex;
   margin-bottom: -1px;
   align-items: center;
+  border: 1px solid #ffffff55;
+  border-radius: 3px;
 `;
 
 const Input = styled.input<{ disabled: boolean; width: string }>`
@@ -77,9 +85,7 @@ const Input = styled.input<{ disabled: boolean; width: string }>`
   border: none;
   font-size: 13px;
   background: #ffffff11;
-  border: 1px solid #ffffff55;
   cursor: ${(props) => (props.disabled ? "not-allowed" : "")};
-  border-radius: 3px;
   width: ${(props) => (props.width ? props.width : "270px")};
   color: ${(props) => (props.disabled ? "#ffffff44" : "white")};
   padding: 5px 10px;

dashboard/src/components/values-form/ValuesForm.tsx

@@ -98,6 +98,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
           return (
             <KeyValueArray
               key={key}
+              width="100%"
               envLoader={true}
               externalValues={this.props.externalValues}
               values={this.props.metaState[key]?.value}
@@ -121,6 +122,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
           return (
             <KeyValueArray
               key={key}
+              width="100%"
               externalValues={this.props.externalValues}
               values={this.props.metaState[key]?.value}
               setValues={(x: any) => this.props.setMetaState(key, x)}
@@ -132,6 +134,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
           return (
             <InputArray
               key={key}
+              width="100%"
               values={this.props.metaState[key]?.value}
               setValues={(x: string[]) => {
                 this.props.setMetaState(key, x);
@@ -144,6 +147,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
           return (
             <InputRow
               key={key}
+              width="100%"
               placeholder={item.placeholder}
               isRequired={item.required}
               type="text"
@@ -168,6 +172,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
           return (
             <InputRow
               key={key}
+              width="100%"
               isRequired={item.required}
               type="password"
               value={this.getInputValue(item)}
@@ -191,6 +196,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
           return (
             <InputRow
               key={key}
+              width="100%"
               isRequired={item.required}
               placeholder={item.placeholder}
               type="number"
@@ -250,6 +256,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
           return (
             <Base64InputRow
               key={key}
+              width="100%"
               isRequired={item.required}
               type="text"
               value={this.getInputValue(item)}

dashboard/src/main/home/provisioner/ExistingClusterSection.tsx

@@ -98,7 +98,7 @@ const Placeholder = styled.div`
   background: #26282f;
   margin-bottom: 27px;
   border-radius: 5px;
-  height: 170px;
+  height: 230px;
   display: flex;
   align-items: center;
   justify-content: center;