Merge branch 'psi-wi-side' into 'master'

Reflow work item layout on small screens

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/142776



Merged-by: Alexander Turinske <aturinske@gitlab.com>
Approved-by: Jay Montal <jmontal@gitlab.com>
Approved-by: Nick Leonard <nleonard@gitlab.com>
Approved-by: Alexander Turinske <aturinske@gitlab.com>
Reviewed-by: Nick Leonard <nleonard@gitlab.com>
Co-authored-by: Simon Knox <simon@gitlab.com>

app/assets/javascripts/work_items/components/work_item_detail.vue

@@ -565,6 +565,7 @@ export default {
         >
           <section>
             <work-item-attributes-wrapper
+              v-if="!workItemsMvc2Enabled"
               :class="{ 'gl-md-display-none!': workItemsMvc2Enabled }"
               class="gl-border-b"
               :full-path="fullPath"
@@ -594,57 +595,11 @@ export default {
               @error="updateError = $event"
               @emoji-updated="$emit('work-item-emoji-updated', $event)"
             />
-            <work-item-tree
-              v-if="showWorkItemTree"
-              :full-path="fullPath"
-              :work-item-type="workItemType"
-              :parent-work-item-type="workItem.workItemType.name"
-              :work-item-id="workItem.id"
-              :work-item-iid="workItemIid"
-              :children="children"
-              :can-update="canUpdate"
-              :confidential="workItem.confidential"
-              @show-modal="openInModal"
-              @addChild="$emit('addChild')"
-            />
-            <work-item-relationships
-              v-if="showWorkItemLinkedItems"
-              :work-item-id="workItem.id"
-              :work-item-iid="workItemIid"
-              :work-item-full-path="fullPath"
-              :work-item-type="workItem.workItemType.name"
-              @showModal="openInModal"
-            />
-            <work-item-notes
-              v-if="workItemNotes"
-              :full-path="fullPath"
-              :work-item-id="workItem.id"
-              :work-item-iid="workItem.iid"
-              :work-item-type="workItemType"
-              :is-modal="isModal"
-              :assignees="workItemAssignees && workItemAssignees.assignees.nodes"
-              :can-set-work-item-metadata="canAssignUnassignUser"
-              :report-abuse-path="reportAbusePath"
-              :is-discussion-locked="isDiscussionLocked"
-              :is-work-item-confidential="workItem.confidential"
-              class="gl-pt-5"
-              :use-h2="!isModal"
-              @error="updateError = $event"
-              @has-notes="updateHasNotes"
-              @openReportAbuse="openReportAbuseDrawer"
-            />
-            <gl-empty-state
-              v-if="error"
-              :title="$options.i18n.fetchErrorTitle"
-              :description="error"
-              :svg-path="noAccessSvgPath"
-              :svg-height="null"
-            />
           </section>
           <aside
             v-if="workItemsMvc2Enabled"
             data-testid="work-item-overview-right-sidebar"
-            class="work-item-overview-right-sidebar gl-display-none gl-md-display-block"
+            class="work-item-overview-right-sidebar"
             :class="{ 'is-modal': isModal }"
           >
             <work-item-attributes-wrapper
@@ -653,6 +608,53 @@ export default {
               @error="updateError = $event"
             />
           </aside>
+
+          <work-item-tree
+            v-if="showWorkItemTree"
+            :full-path="fullPath"
+            :work-item-type="workItemType"
+            :parent-work-item-type="workItem.workItemType.name"
+            :work-item-id="workItem.id"
+            :work-item-iid="workItemIid"
+            :children="children"
+            :can-update="canUpdate"
+            :confidential="workItem.confidential"
+            @show-modal="openInModal"
+            @addChild="$emit('addChild')"
+          />
+          <work-item-relationships
+            v-if="showWorkItemLinkedItems"
+            :work-item-id="workItem.id"
+            :work-item-iid="workItemIid"
+            :work-item-full-path="fullPath"
+            :work-item-type="workItem.workItemType.name"
+            @showModal="openInModal"
+          />
+          <work-item-notes
+            v-if="workItemNotes"
+            :full-path="fullPath"
+            :work-item-id="workItem.id"
+            :work-item-iid="workItem.iid"
+            :work-item-type="workItemType"
+            :is-modal="isModal"
+            :assignees="workItemAssignees && workItemAssignees.assignees.nodes"
+            :can-set-work-item-metadata="canAssignUnassignUser"
+            :report-abuse-path="reportAbusePath"
+            :is-discussion-locked="isDiscussionLocked"
+            :is-work-item-confidential="workItem.confidential"
+            class="gl-pt-5"
+            :use-h2="!isModal"
+            @error="updateError = $event"
+            @has-notes="updateHasNotes"
+            @openReportAbuse="openReportAbuseDrawer"
+          />
+          <gl-empty-state
+            v-if="error"
+            :title="$options.i18n.fetchErrorTitle"
+            :description="error"
+            :svg-path="noAccessSvgPath"
+            :svg-height="null"
+          />
         </div>
       </template>
       <work-item-detail-modal

app/assets/stylesheets/page_bundles/work_items.scss

@@ -2,7 +2,7 @@
 @import 'system_note_styles';
 
 $work-item-field-inset-shadow: inset 0 0 0 $gl-border-size-1 var(--gray-200, $gray-200) !important;
-$work-item-overview-right-sidebar-width: 23rem;
+$work-item-overview-right-sidebar-width: 20rem;
 $work-item-sticky-header-height: 52px;
 $work-item-overview-gap-width: 2rem;
 
@@ -146,13 +146,23 @@ $work-item-overview-gap-width: 2rem;
 .work-item-overview {
   @include media-breakpoint-up(md) {
     display: grid;
-    grid-template-columns: 1fr $work-item-overview-right-sidebar-width;
-    gap: $work-item-overview-gap-width;
+    // allow the main content area to shrink
+    // grid items have "max-width: auto" so without the minmax the content can
+    // spill outside of the overview container
+    grid-template-columns: minmax(0, 1fr) $work-item-overview-right-sidebar-width;
+    column-gap: $work-item-overview-gap-width;
   }
 }
 
 .work-item-overview-right-sidebar {
+  margin-top: $gl-spacing-scale-5;
+
   @include media-breakpoint-up(md) {
+    margin-top: 0;
+    grid-row-start: 1;
+    grid-column-start: 2;
+    grid-row-end: 4;
+
     &.is-modal {
       .work-item-attributes-wrapper {
         top: 0;