better launch spacing for feroze

dashboard/src/components/porter/Select.tsx

@@ -32,6 +32,7 @@ const Select: React.FC<Props> = ({
         )
       }
       <SelectWrapper>
+        <i className="material-icons">arrow_drop_down</i>
         <StyledSelect
           onChange={e => {
             setValue(e.target.value);
@@ -46,7 +47,6 @@ const Select: React.FC<Props> = ({
             return <option value={option.value} key={i}>{option.label}</option>;
           })}
         </StyledSelect>
-        <i className="material-icons">arrow_drop_down</i>
       </SelectWrapper>
       {
         error && (
@@ -92,11 +92,14 @@ const Error = styled.div`
 
 const SelectWrapper = styled.div`
   position: relative;
+  background: #26292e;
+  z-index: 0;
   > i {
     font-size: 18px;
     position: absolute;
     right: 7px;
     top: calc(50% - 9px);
+    z-index: -1;
   }
 `;
 
@@ -112,15 +115,9 @@ const StyledSelect = styled.select<{
   font-size: 13px;
   outline: none;
   border-radius: 5px;
-  background: #26292e;
+  background: none;
   appearance: none;
-  > i {
-    font-size: 18px;
-    position: absolute;
-    right: 10px;
-    top: 10px;
-  }
-
+  z-index: 1;
   border: 1px solid ${props => props.hasError ? "#ff3b62" : "#494b4f"};
   :hover {
     border: 1px solid ${props => props.hasError ? "#ff3b62" : "#7a7b80"};

dashboard/src/components/porter/VerticalSteps.tsx

@@ -91,6 +91,4 @@ const StepWrapper = styled.div<{
 
 const StyledVerticalSteps = styled.div<{
 }>`
-  min-width: 600px;
-  max-width: 800px;
 `;

dashboard/src/main/home/add-on-dashboard/ConfigureTemplate.tsx

@@ -172,62 +172,69 @@ const ConfigureTemplate: React.FC<Props> = ({
 
   return (
     <CenterWrapper>
-      <StyledConfigureTemplate>
-        <Back onClick={goBack} />
-        <DashboardHeader
-          prefix={
-            <Icon 
-              src={hardcodedIcons[currentTemplate.name] || currentTemplate.icon}
-            />
-          }
-          title={`Configure new ${hardcodedNames[currentTemplate.name] || currentTemplate.name} instance`}
-          capitalize={false}
-          disableLineBreak
-        />
-        <DarkMatter />
-        <VerticalSteps
-          currentStep={currentStep}
-          steps={[
-            <>
-              <Text size={16}>Add-on name</Text>
-              <Spacer y={0.5} />
-              <Text color="helper">
-                Randomly generated if left blank (lowercase letters, numbers, and "-" only).
-              </Text>
-              <Spacer height="20px" />
-              <Input
-                placeholder="ex: academic-sophon"
-                value={name}
-                width="300px"
-                setValue={(e) => {
-                  if (e) {
-                    setCurrentStep(1);
-                  } else {
-                    setCurrentStep(0);
-                  }
-                  setName(e);
-                }}
+      <Div>
+        <StyledConfigureTemplate>
+          <Back onClick={goBack} />
+          <DashboardHeader
+            prefix={
+              <Icon 
+                src={hardcodedIcons[currentTemplate.name] || currentTemplate.icon}
               />
-            </>,
-            <>
-              <Text size={16}>Add-on settings</Text>
-              <Spacer y={0.5} />
-              <Text color="helper">
-              Configure settings for this add-on.
-              </Text>
-              <Spacer height="20px" />
-              {renderAddOnSettings()}
-            </>
-          ]}
-        />
-        <Spacer height="80px" />
-      </StyledConfigureTemplate>
+            }
+            title={`Configure new ${hardcodedNames[currentTemplate.name] || currentTemplate.name} instance`}
+            capitalize={false}
+            disableLineBreak
+          />
+          <DarkMatter />
+          <VerticalSteps
+            currentStep={currentStep}
+            steps={[
+              <>
+                <Text size={16}>Add-on name</Text>
+                <Spacer y={0.5} />
+                <Text color="helper">
+                  Randomly generated if left blank (lowercase letters, numbers, and "-" only).
+                </Text>
+                <Spacer height="20px" />
+                <Input
+                  placeholder="ex: academic-sophon"
+                  value={name}
+                  width="300px"
+                  setValue={(e) => {
+                    if (e) {
+                      setCurrentStep(1);
+                    } else {
+                      setCurrentStep(0);
+                    }
+                    setName(e);
+                  }}
+                />
+              </>,
+              <>
+                <Text size={16}>Add-on settings</Text>
+                <Spacer y={0.5} />
+                <Text color="helper">
+                Configure settings for this add-on.
+                </Text>
+                <Spacer height="20px" />
+                {renderAddOnSettings()}
+              </>
+            ]}
+          />
+          <Spacer height="80px" />
+        </StyledConfigureTemplate>
+      </Div>
     </CenterWrapper>
   );
 };
 
 export default withRouter(ConfigureTemplate);
 
+const Div = styled.div`
+  width: 100%;
+  max-width: 900px;
+`;
+
 const CenterWrapper = styled.div`
   width: 100%;
   display: flex;

dashboard/src/main/home/app-dashboard/new-app-flow/NewAppFlow.tsx

@@ -25,6 +25,7 @@ import SourceSelector, { SourceType } from "./SourceSelector";
 import SourceSettings from "./SourceSettings"
 import Services from "./Services";
 import EnvGroupArray, { KeyValueType } from "main/home/cluster-dashboard/env-groups/EnvGroupArray";
+import Select from "components/porter/Select";
 
 type Props = RouteComponentProps & {
 };
@@ -65,6 +66,7 @@ const NewAppFlow: React.FC<Props> = ({
 
   return (
     <CenterWrapper>
+      <Div>
       <StyledConfigureTemplate>
         <Back to="/apps" />
         <DashboardHeader
@@ -171,12 +173,18 @@ const NewAppFlow: React.FC<Props> = ({
           DEPLYOY
         </Button>
       </StyledConfigureTemplate>
+      </Div>
     </CenterWrapper>
   );
 };
 
 export default withRouter(NewAppFlow);
 
+const Div = styled.div`
+  width: 100%;
+  max-width: 900px;
+`;
+
 const CenterWrapper = styled.div`
   width: 100%;
   display: flex;