From 274ed1a52b0a9fc95a25d6c6e5c974a6c8a99b54 Mon Sep 17 00:00:00 2001
From: Nick Leonard <nleonard@gitlab.com>
Date: Wed, 17 Sep 2025 14:59:10 -0500
Subject: [PATCH] Show work item attrs inline when wide

Allows work item attributes to flow
to a single row when space allows,
such as in a mid sized panel.

Changelog: changed
---
 .../shared/work_item_sidebar_widget.vue       |  73 +++----
 .../components/work_item_assignees.vue        |   1 -
 .../components/work_item_time_tracking.vue    | 185 +++++++++---------
 .../stylesheets/page_bundles/work_items.scss  |  44 +++++
 .../components/work_item_custom_fields.vue    |   2 +-
 5 files changed, 179 insertions(+), 126 deletions(-)

diff --git a/app/assets/javascripts/work_items/components/shared/work_item_sidebar_widget.vue b/app/assets/javascripts/work_items/components/shared/work_item_sidebar_widget.vue
index 3509f635cd01ec..5b8dbbab7637c7 100644
--- a/app/assets/javascripts/work_items/components/shared/work_item_sidebar_widget.vue
+++ b/app/assets/javascripts/work_items/components/shared/work_item_sidebar_widget.vue
@@ -74,42 +74,47 @@ export default {
 </script>
 
 <template>
-  <section>
-    <div class="gl-flex gl-items-center gl-gap-3">
-      <h3 class="gl-heading-5 gl-mb-0">
+  <section class="work-item-attribute-widget">
+    <div class="work-item-attribute-widget-header">
+      <h3 class="work-item-attribute-widget-title gl-heading-5 gl-mb-0">
         <slot name="title"></slot>
       </h3>
-      <gl-loading-icon v-if="isUpdating" />
-      <gl-button
-        v-if="canUpdate && !editing"
-        key="edit-button"
-        v-gl-tooltip.viewport.html
-        class="shortcut-sidebar-dropdown-toggle gl-ml-auto gl-shrink-0"
-        category="tertiary"
-        :disabled="isUpdating"
-        size="small"
-        :title="tooltipText"
-        data-testid="edit-button"
-        @click="startEditing"
-      >
-        {{ __('Edit') }}
-      </gl-button>
-      <gl-button
-        v-if="editing"
-        key="apply-button"
-        class="gl-ml-auto gl-shrink-0"
-        category="tertiary"
-        :disabled="isUpdating"
-        size="small"
-        data-testid="apply-button"
-        @click="stopEditing"
-      >
-        {{ __('Apply') }}
-      </gl-button>
-    </div>
-    <div v-if="editing" v-outside="stopEditing">
-      <slot name="editing-content" :stop-editing="stopEditing"></slot>
+      <gl-loading-icon v-if="isUpdating" class="work-item-attribute-widget-loading" />
+
+      <div class="work-item-attribute-widget-button">
+        <gl-button
+          v-if="canUpdate && !editing"
+          key="edit-button"
+          v-gl-tooltip.viewport.html
+          class="shortcut-sidebar-dropdown-toggle"
+          category="tertiary"
+          :disabled="isUpdating"
+          size="small"
+          :title="tooltipText"
+          data-testid="edit-button"
+          @click="startEditing"
+        >
+          {{ __('Edit') }}
+        </gl-button>
+        <gl-button
+          v-if="editing"
+          key="apply-button"
+          category="tertiary"
+          :disabled="isUpdating"
+          size="small"
+          data-testid="apply-button"
+          @click="stopEditing"
+        >
+          {{ __('Apply') }}
+        </gl-button>
+      </div>
+
+      <div class="work-item-attribute-widget-content">
+        <div v-if="editing" v-outside="stopEditing">
+          <slot name="editing-content" :stop-editing="stopEditing"></slot>
+        </div>
+        <slot v-else name="content"></slot>
+      </div>
     </div>
-    <slot v-else name="content"></slot>
   </section>
 </template>
diff --git a/app/assets/javascripts/work_items/components/work_item_assignees.vue b/app/assets/javascripts/work_items/components/work_item_assignees.vue
index aa47a1965c5a6b..c29ac10a6cb437 100644
--- a/app/assets/javascripts/work_items/components/work_item_assignees.vue
+++ b/app/assets/javascripts/work_items/components/work_item_assignees.vue
@@ -389,7 +389,6 @@ export default {
       <uncollapsed-assignee-list
         :users="localAssignees"
         show-less-assignees-class="hover:!gl-bg-transparent"
-        class="gl-mt-2"
       />
     </template>
   </work-item-sidebar-dropdown-widget>
diff --git a/app/assets/javascripts/work_items/components/work_item_time_tracking.vue b/app/assets/javascripts/work_items/components/work_item_time_tracking.vue
index 0d5fdd300d1d5c..e22e9fa87f92d8 100644
--- a/app/assets/javascripts/work_items/components/work_item_time_tracking.vue
+++ b/app/assets/javascripts/work_items/components/work_item_time_tracking.vue
@@ -123,109 +123,114 @@ export default {
 </script>
 
 <template>
-  <div data-testid="work-item-time-tracking">
-    <div class="gl-flex gl-items-center gl-justify-between">
-      <h3 class="gl-heading-5 !gl-mb-2">
+  <section class="work-item-attribute-widget" data-testid="work-item-time-tracking">
+    <div class="work-item-attribute-widget-header">
+      <h3 class="work-item-attribute-widget-title gl-heading-5 gl-mb-0">
         {{ __('Time tracking') }}
       </h3>
-      <gl-button
-        v-if="canUpdate"
-        v-gl-modal="createTimelogModalId"
-        v-gl-tooltip.top
-        category="tertiary"
-        icon="plus"
-        size="small"
-        data-testid="add-time-entry-button"
-        :title="__('Add time entry')"
-        :aria-label="__('Add time entry')"
-      />
-    </div>
 
-    <div
-      class="time-tracking-body gl-flex gl-flex-wrap gl-items-center gl-gap-2"
-      data-testid="time-tracking-body"
-    >
-      <template v-if="totalTimeSpent || timeEstimate">
+      <div class="work-item-attribute-widget-button">
+        <gl-button
+          v-if="canUpdate"
+          v-gl-modal="createTimelogModalId"
+          v-gl-tooltip.top
+          category="tertiary"
+          icon="plus"
+          size="small"
+          data-testid="add-time-entry-button"
+          :title="__('Add time entry')"
+          :aria-label="__('Add time entry')"
+        />
+      </div>
+
+      <div class="work-item-attribute-widget-content">
         <div
-          class="time-tracking-spent-and-progress gl-flex gl-grow gl-flex-wrap-reverse gl-items-center gl-justify-between gl-gap-2"
+          class="time-tracking-body gl-flex gl-flex-wrap gl-items-center gl-gap-2"
+          data-testid="time-tracking-body"
         >
-          <div class="gl-flex gl-items-center gl-gap-2">
-            <span class="gl-text-subtle">{{ s__('TimeTracking|Spent') }}</span>
-            <gl-button
-              v-if="canUpdate"
-              v-gl-modal="timeTrackingModalId"
-              v-gl-tooltip="s__('TimeTracking|View time tracking report')"
-              variant="link"
-              data-testid="view-time-spent-button"
-            >
-              {{ humanTotalTimeSpent }}
-            </gl-button>
-            <template v-else>
-              {{ humanTotalTimeSpent }}
-            </template>
-          </div>
-          <template v-if="timeEstimate">
-            <gl-progress-bar
-              v-gl-tooltip="progressBarTooltipText"
-              class="time-tracking-progress gl-min-w-11 gl-grow"
-              :value="timeRemainingPercent"
-              :variant="progressBarVariant"
-            />
-          </template>
-        </div>
-        <template v-if="timeEstimate">
-          <div class="gl-flex gl-items-center gl-gap-2">
-            <span class="gl-text-subtle">{{ s__('TimeTracking|Estimate') }}</span>
-            <gl-button
-              v-if="canUpdate"
-              v-gl-modal="setTimeEstimateModalId"
-              v-gl-tooltip="s__('TimeTracking|Set estimate')"
-              variant="link"
-              data-testid="set-estimate-button"
+          <template v-if="totalTimeSpent || timeEstimate">
+            <div
+              class="time-tracking-spent-and-progress gl-flex gl-grow gl-flex-wrap-reverse gl-items-center gl-justify-between gl-gap-2"
             >
-              {{ humanTimeEstimate }}
-            </gl-button>
-            <template v-else>
-              {{ humanTimeEstimate }}
+              <div class="gl-flex gl-items-center gl-gap-2">
+                <span class="gl-text-subtle">{{ s__('TimeTracking|Spent') }}</span>
+                <gl-button
+                  v-if="canUpdate"
+                  v-gl-modal="timeTrackingModalId"
+                  v-gl-tooltip="s__('TimeTracking|View time tracking report')"
+                  variant="link"
+                  data-testid="view-time-spent-button"
+                >
+                  {{ humanTotalTimeSpent }}
+                </gl-button>
+                <template v-else>
+                  {{ humanTotalTimeSpent }}
+                </template>
+              </div>
+              <template v-if="timeEstimate">
+                <gl-progress-bar
+                  v-gl-tooltip="progressBarTooltipText"
+                  class="time-tracking-progress gl-min-w-11 gl-grow"
+                  :value="timeRemainingPercent"
+                  :variant="progressBarVariant"
+                />
+              </template>
+            </div>
+            <template v-if="timeEstimate">
+              <div class="gl-flex gl-items-center gl-gap-2">
+                <span class="gl-text-subtle">{{ s__('TimeTracking|Estimate') }}</span>
+                <gl-button
+                  v-if="canUpdate"
+                  v-gl-modal="setTimeEstimateModalId"
+                  v-gl-tooltip="s__('TimeTracking|Set estimate')"
+                  variant="link"
+                  data-testid="set-estimate-button"
+                >
+                  {{ humanTimeEstimate }}
+                </gl-button>
+                <template v-else>
+                  {{ humanTimeEstimate }}
+                </template>
+              </div>
             </template>
-          </div>
-        </template>
-        <gl-button
-          v-else-if="canUpdate"
-          v-gl-modal="setTimeEstimateModalId"
-          variant="link"
-          data-testid="add-estimate-button"
-        >
-          {{ s__('TimeTracking|Add estimate') }}
-        </gl-button>
-      </template>
-      <span v-else-if="canUpdate" class="gl-text-subtle">
-        <gl-sprintf :message="$options.i18n.addTimeTrackingMessage">
-          <template #estimate="{ content }">
             <gl-button
+              v-else-if="canUpdate"
               v-gl-modal="setTimeEstimateModalId"
-              class="gl-align-baseline"
               variant="link"
               data-testid="add-estimate-button"
             >
-              {{ content }}
+              {{ s__('TimeTracking|Add estimate') }}
             </gl-button>
           </template>
-          <template #timeSpent="{ content }">
-            <gl-button
-              v-gl-modal="createTimelogModalId"
-              class="gl-align-baseline"
-              variant="link"
-              data-testid="add-time-spent-button"
-            >
-              {{ content }}
-            </gl-button>
-          </template>
-        </gl-sprintf>
-      </span>
-      <span v-else class="gl-text-subtle">
-        {{ __('No estimate or time spent') }}
-      </span>
+          <span v-else-if="canUpdate" class="gl-text-subtle">
+            <gl-sprintf :message="$options.i18n.addTimeTrackingMessage">
+              <template #estimate="{ content }">
+                <gl-button
+                  v-gl-modal="setTimeEstimateModalId"
+                  class="gl-align-baseline"
+                  variant="link"
+                  data-testid="add-estimate-button"
+                >
+                  {{ content }}
+                </gl-button>
+              </template>
+              <template #timeSpent="{ content }">
+                <gl-button
+                  v-gl-modal="createTimelogModalId"
+                  class="gl-align-baseline"
+                  variant="link"
+                  data-testid="add-time-spent-button"
+                >
+                  {{ content }}
+                </gl-button>
+              </template>
+            </gl-sprintf>
+          </span>
+          <span v-else class="gl-text-subtle">
+            {{ __('No estimate or time spent') }}
+          </span>
+        </div>
+      </div>
     </div>
 
     <set-time-estimate-form
@@ -249,5 +254,5 @@ export default {
         :work-item-iid="workItemIid"
       />
     </gl-modal>
-  </div>
+  </section>
 </template>
diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss
index ad39301e7c62d1..9ce2157f1d45bb 100644
--- a/app/assets/stylesheets/page_bundles/work_items.scss
+++ b/app/assets/stylesheets/page_bundles/work_items.scss
@@ -262,6 +262,50 @@ $disclosure-hierarchy-chevron-dimension: 1.2rem;
     max-width: 17rem !important;
 }
 
+.work-item-attribute-widget {
+  container-type: inline-size;
+}
+
+.work-item-attribute-widget-header {
+  @apply gl-flex gl-items-start gl-gap-x-3 gl-gap-y-0 gl-flex-wrap;
+}
+
+.work-item-attribute-widget-title {
+  @apply gl-flex-1 gl-flex gl-min-h-6 gl-items-center gl-order-1 gl-leading-1;
+}
+
+
+.work-item-attribute-widget-loading {
+  @apply gl-order-2;
+}
+
+.work-item-attribute-widget-button {
+  @apply gl-order-3 gl-shrink-0;
+}
+
+.work-item-attribute-widget-content {
+  @apply gl-order-4 gl-basis-full gl-min-w-0 gl-min-h-6 gl-content-center;
+}
+
+/* Wider layout, used when reflowed */
+@container (min-width: 308px) {
+  .work-item-attribute-widget-header {
+    @apply gl-flex-nowrap gl-gap-y-4;
+  }
+
+  .work-item-attribute-widget-title {
+    flex: 0 0 clamp(6rem, 25%, 10rem);
+  }
+
+  .work-item-attribute-widget-button {
+    @apply gl-order-4 gl-shrink-0;
+  }
+
+  .work-item-attribute-widget-content {
+    @apply gl-order-3 gl-flex-1 gl-basis-auto gl-w-auto gl-min-w-0 gl-overflow-hidden;
+  }
+}
+
 .container-limited {
   .work-item-sticky-header-text {
     max-width: $fixed-layout-width;
diff --git a/ee/app/assets/javascripts/work_items/components/work_item_custom_fields.vue b/ee/app/assets/javascripts/work_items/components/work_item_custom_fields.vue
index b6dbeae80fccb5..9e5c6e45e42b89 100644
--- a/ee/app/assets/javascripts/work_items/components/work_item_custom_fields.vue
+++ b/ee/app/assets/javascripts/work_items/components/work_item_custom_fields.vue
@@ -70,7 +70,7 @@ export default {
       :is="customFieldComponent(customFieldData.customField)"
       v-for="customFieldData in customFields"
       :key="customFieldData.customField.id"
-      class="gl-border-t gl-mb-5 gl-border-subtle gl-pt-5"
+      class="gl-border-t gl-mb-5 gl-border-subtle gl-pt-4"
       :work-item-id="workItemId"
       :custom-field="customFieldData"
       :can-update="canUpdate"
-- 
GitLab