cant let bert down

dashboard/src/components/porter/VerticalSteps.tsx

@@ -84,12 +84,13 @@ const OpacityWrapper = styled.div<{
 
 const StepWrapper = styled.div<{
 }>`
-  padding-left: 22px;
+  padding-left: 30px;
   position: relative;
   margin-bottom: 35px;
 `;
 
 const StyledVerticalSteps = styled.div<{
 }>`
-width: 600px;
+  min-width: 600px;
+  max-width: 900px;
 `;

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

@@ -171,61 +171,70 @@ const ConfigureTemplate: React.FC<Props> = ({
   };
 
   return (
-    <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);
-              }}
+    <CenterWrapper>
+      <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>
+    </CenterWrapper>
   );
 };
 
 export default withRouter(ConfigureTemplate);
 
+const CenterWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
 const DarkMatter = styled.div`
   width: 100%;
   margin-top: -5px;
@@ -250,6 +259,5 @@ const Icon = styled.img`
 `;
 
 const StyledConfigureTemplate = styled.div`
-  width: 100%;
   height: 100%;
 `;

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

@@ -66,7 +66,7 @@ const NewAppFlow: React.FC<Props> = ({
   const [showGHAModal, setShowGHAModal] = useState<boolean>(false);
 
   return (
-    <>
+    <CenterWrapper>
       <StyledConfigureTemplate>
         <Back to="/apps" />
         <DashboardHeader
@@ -174,12 +174,19 @@ const NewAppFlow: React.FC<Props> = ({
         </Button>
       </StyledConfigureTemplate>
       {showGHAModal && <GithubActionModal closeModal={() => setShowGHAModal(false)} />}
-    </>
+    </CenterWrapper>
   );
 };
 
 export default withRouter(NewAppFlow);
 
+const CenterWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
 const DarkMatter = styled.div`
   width: 100%;
   margin-top: -5px;
@@ -204,7 +211,6 @@ const Icon = styled.img`
 `;
 
 const StyledConfigureTemplate = styled.div`
-  width: 100%;
   height: 100%;
 `;