Merge pull request #2099 from HarshMN2345/fix-SER-84-project-creation-accessibilty

Author: ItzNotABug

src/lib/layout/createProject.svelte

@@ -22,44 +22,42 @@
     {/each}
 </svelte:head>
 
-<form on:submit|preventDefault>
+<Layout.Stack direction="column" gap="xxl">
+    {#if showTitle}
+        <Typography.Title size="l">Create your project</Typography.Title>
+    {/if}
     <Layout.Stack direction="column" gap="xxl">
-        {#if showTitle}
-            <Typography.Title size="l">Create your project</Typography.Title>
-        {/if}
         <Layout.Stack direction="column" gap="xxl">
-            <Layout.Stack direction="column" gap="xxl">
-                <Layout.Stack direction="column" gap="s">
-                    <Input.Text
-                        label="Name"
-                        placeholder="Project name"
-                        required
-                        autofocus
-                        bind:value={projectName} />
-                    {#if !showCustomId}
-                        <div>
-                            <Tag
-                                size="s"
-                                on:click={() => {
-                                    showCustomId = true;
-                                }}><Icon slot="start" icon={IconPencil} size="s" /> Project ID</Tag>
-                        </div>
-                    {/if}
-                    <CustomId bind:show={showCustomId} name="Project" isProject bind:id />
-                </Layout.Stack>
-                {#if isCloud && regions.length > 0}
-                    <Layout.Stack gap="xs">
-                        <Input.Select
-                            required
-                            bind:value={region}
-                            placeholder="Select a region"
-                            options={filterRegions(regions)}
-                            label="Region" />
-                        <Typography.Text>Region cannot be changed after creation</Typography.Text>
-                    </Layout.Stack>
+            <Layout.Stack direction="column" gap="s">
+                <Input.Text
+                    label="Name"
+                    placeholder="Project name"
+                    required
+                    autofocus
+                    bind:value={projectName} />
+                {#if !showCustomId}
+                    <div>
+                        <Tag
+                            size="s"
+                            on:click={() => {
+                                showCustomId = true;
+                            }}><Icon icon={IconPencil} slot="start" size="s" /> Project ID</Tag>
+                    </div>
                 {/if}
+                <CustomId bind:show={showCustomId} name="Project" isProject bind:id />
             </Layout.Stack>
+            {#if isCloud && regions.length > 0}
+                <Layout.Stack gap="xs">
+                    <Input.Select
+                        required
+                        bind:value={region}
+                        placeholder="Select a region"
+                        options={filterRegions(regions)}
+                        label="Region" />
+                    <Typography.Text>Region cannot be changed after creation</Typography.Text>
+                </Layout.Stack>
+            {/if}
         </Layout.Stack>
-        <slot name="submit"></slot>
     </Layout.Stack>
-</form>
+    <slot name="submit"></slot>
+</Layout.Stack>