App v2 UI cleanup (#3629)

Co-authored-by: Justin Rhee <jusrhee@Justins-MacBook-Air-2.local>
Co-authored-by: ianedwards <ianedwards559@gmail.com>

dashboard/src/main/home/app-dashboard/create-app/CreateApp.tsx

@@ -340,31 +340,41 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
 
   useEffect(() => {
     // set step to 1 if name is filled out
-    if (name) {
+    if (name.value) {
       setStep((prev) => Math.max(prev, 1));
+    } else {
+      setStep(0);
     }
 
     // set step to 2 if source is filled out
     if (source?.type && source.type === "github") {
       if (source.git_repo_name && source.git_branch) {
-        setStep((prev) => Math.max(prev, 5));
+        setStep((prev) => Math.max(prev, 2));
       }
     }
 
-    // set step to 3 if source is filled out
+    // set step to 2 if source is filled out
     if (source?.type && source.type === "docker-registry") {
       if (image && image.tag) {
-        setStep((prev) => Math.max(prev, 5));
+        setStep((prev) => Math.max(prev, 2));
       }
     }
   }, [
-    name,
+    name.value,
     source?.type,
     source?.git_repo_name,
     source?.git_branch,
     image?.tag,
   ]);
 
+  useEffect(() => {
+    if (services?.length > 0) {
+      setStep((prev) => Math.max(prev, 5));
+    } else {
+      setStep((prev) => Math.min(prev, 2));
+    };
+  }, [services]);
+
   // todo(ianedwards): it's a bit odd that the button error can be set to either a string or JSX,
   // need to look into refactoring that where possible and then improve this error handling
   const submitBtnStatus = useMemo(() => {
@@ -500,6 +510,7 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
                     <ControlledInput
                       placeholder="ex: academic-sophon"
                       type="text"
+                      width="300px"
                       error={errors.app?.name?.message}
                       disabled={name.readOnly}
                       disabledTooltip={