From c5e3eb088691a8f9009c6f41db2fd42f581f5c20 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Fri, 18 Jul 2025 13:24:56 +0200
Subject: [PATCH] Work item create form: Move fields inside section

Moves project, type and title into section to move sidebar up and
restrict width of title field. Better resembles the layout of the
actual work item.

Changelog: changed
---
 .../components/create_work_item.vue           | 122 +++++++++---------
 1 file changed, 63 insertions(+), 59 deletions(-)

diff --git a/app/assets/javascripts/work_items/components/create_work_item.vue b/app/assets/javascripts/work_items/components/create_work_item.vue
index d4e6144e9fe576..e0b537de41c4c9 100644
--- a/app/assets/javascripts/work_items/components/create_work_item.vue
+++ b/app/assets/javascripts/work_items/components/create_work_item.vue
@@ -1010,68 +1010,72 @@ export default {
       </gl-alert>
       <page-heading v-if="!hideFormTitle" :heading="titleText" />
 
-      <div class="gl-flex gl-items-center gl-gap-4">
-        <template v-if="workItemPlanningViewEnabled">
-          <gl-form-group class="gl-mr-4 gl-max-w-26 gl-flex-grow" :label="__('Group/project')">
-            <work-item-namespace-listbox
-              v-model="selectedNamespacePath"
-              :full-path="fullPath"
-              :is-group="isGroup"
-            />
-          </gl-form-group>
-        </template>
-
-        <template v-else>
-          <gl-form-group
-            v-if="showProjectSelector"
-            class="gl-max-w-26 gl-flex-grow"
-            :label="__('Project')"
-            label-for="create-work-item-project"
-          >
-            <work-item-projects-listbox
-              v-model="selectedProjectFullPath"
-              :full-path="fullPath"
-              :is-group="isGroup"
-              :current-project-name="namespaceFullName"
-              :project-namespace-full-path="projectNamespaceFullPath"
-              toggle-id="create-work-item-project"
-            />
-          </gl-form-group>
-        </template>
-
-        <gl-loading-icon v-if="$apollo.queries.namespace.loading" size="lg" />
-        <gl-form-group
-          v-else-if="showItemTypeSelect"
-          class="gl-max-w-26 gl-flex-grow"
-          :label="__('Type')"
-          label-for="work-item-type"
-        >
-          <gl-form-select
-            id="work-item-type"
-            v-model="selectedWorkItemTypeId"
-            data-testid="work-item-types-select"
-            :options="formOptions"
-            @change="handleChangeType"
-          />
-        </gl-form-group>
-      </div>
       <template v-if="selectedWorkItemTypeId">
-        <work-item-title
-          ref="title"
-          data-testid="title-input"
-          is-editing
-          :is-valid="isTitleValid"
-          :title="workItemTitle"
-          @updateDraft="updateDraftData('title', $event)"
-        />
-        <title-suggestions
-          :project-path="selectedProjectFullPath"
-          :search="workItemTitle"
-          :help-text="$options.i18n.similarWorkItemHelpText"
-          :title="$options.i18n.suggestionTitle"
-        />
         <div data-testid="work-item-overview" class="work-item-overview">
           <section>
+            <div class="gl-flex gl-items-center gl-gap-4">
+              <template v-if="workItemPlanningViewEnabled">
+                <gl-form-group
+                  class="gl-mr-4 gl-max-w-26 gl-flex-grow"
+                  :label="__('Group/project')"
+                >
+                  <work-item-namespace-listbox
+                    v-model="selectedNamespacePath"
+                    :full-path="fullPath"
+                    :is-group="isGroup"
+                  />
+                </gl-form-group>
+              </template>
+
+              <template v-else>
+                <gl-form-group
+                  v-if="showProjectSelector"
+                  class="gl-max-w-26 gl-flex-grow"
+                  :label="__('Project')"
+                  label-for="create-work-item-project"
+                >
+                  <work-item-projects-listbox
+                    v-model="selectedProjectFullPath"
+                    :full-path="fullPath"
+                    :is-group="isGroup"
+                    :current-project-name="namespaceFullName"
+                    :project-namespace-full-path="projectNamespaceFullPath"
+                    toggle-id="create-work-item-project"
+                  />
+                </gl-form-group>
+              </template>
+
+              <gl-loading-icon v-if="$apollo.queries.namespace.loading" size="lg" />
+              <gl-form-group
+                v-else-if="showItemTypeSelect"
+                class="gl-max-w-26 gl-flex-grow"
+                :label="__('Type')"
+                label-for="work-item-type"
+              >
+                <gl-form-select
+                  id="work-item-type"
+                  v-model="selectedWorkItemTypeId"
+                  data-testid="work-item-types-select"
+                  :options="formOptions"
+                  @change="handleChangeType"
+                />
+              </gl-form-group>
+            </div>
+
+            <work-item-title
+              ref="title"
+              data-testid="title-input"
+              is-editing
+              :is-valid="isTitleValid"
+              :title="workItemTitle"
+              @updateDraft="updateDraftData('title', $event)"
+            />
+            <title-suggestions
+              :project-path="selectedProjectFullPath"
+              :search="workItemTitle"
+              :help-text="$options.i18n.similarWorkItemHelpText"
+              :title="$options.i18n.suggestionTitle"
+            />
             <work-item-description
               edit-mode
               is-create-flow
-- 
GitLab