From 861d6d3c46e97d88049e3cf67c411b9daa8eec53 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Wed, 23 Jul 2025 10:17:13 -0600
Subject: [PATCH] Update pending comments design in review drawer

Changelog: changed
---
 .../components/preview_item.vue               | 63 ++++++++++---------
 .../components/review_drawer.vue              |  2 +-
 .../page_bundles/merge_request.scss           | 14 +++++
 .../page_bundles/merge_requests.scss          | 13 ----
 4 files changed, 50 insertions(+), 42 deletions(-)

diff --git a/app/assets/javascripts/batch_comments/components/preview_item.vue b/app/assets/javascripts/batch_comments/components/preview_item.vue
index 3b383d8280ca31..de1f8b1a873a8d 100644
--- a/app/assets/javascripts/batch_comments/components/preview_item.vue
+++ b/app/assets/javascripts/batch_comments/components/preview_item.vue
@@ -99,36 +99,43 @@ export default {
 
 <template>
   <span>
-    <gl-button
-      variant="link"
-      class="review-preview-item-header !gl-justify-start"
-      data-testid="preview-item-header"
-      @click="$emit('click', draft)"
-    >
-      <gl-icon class="flex-shrink-0" :name="iconName" /><span class="text-nowrap gl-items-center">
-        <span class="review-preview-item-header-text block-truncated">{{ titleText }}</span>
-        <template v-if="showLinePosition">
-          <template v-if="startLineNumber === endLineNumber">
-            :<span :class="getLineClasses(startLineNumber)">{{ startLineNumber }}</span>
-          </template>
-          <gl-sprintf v-else :message="__(':%{startLine} to %{endLine}')">
-            <template #startLine>
-              <span class="gl-mr-2" :class="getLineClasses(startLineNumber)">{{
-                startLineNumber
-              }}</span>
-            </template>
-            <template #endLine>
-              <span class="gl-ml-2" :class="getLineClasses(endLineNumber)">{{
-                endLineNumber
-              }}</span>
+    <div class="gl-flex gl-gap-3">
+      <div
+        class="review-comment-icon gl-inline-flex gl-w-5 gl-items-center gl-justify-center gl-rounded-full gl-bg-strong"
+      >
+        <gl-icon class="flex-shrink-0" :name="iconName" :size="14" />
+      </div>
+      <gl-button
+        variant="link"
+        class="review-preview-item-header !gl-justify-start"
+        data-testid="preview-item-header"
+        @click="$emit('click', draft)"
+      >
+        <span class="text-nowrap gl-items-center">
+          <span class="review-preview-item-header-text block-truncated">{{ titleText }}</span>
+          <template v-if="showLinePosition">
+            <template v-if="startLineNumber === endLineNumber">
+              :<span :class="getLineClasses(startLineNumber)">{{ startLineNumber }}</span>
             </template>
-          </gl-sprintf>
-        </template>
-      </span>
-    </gl-button>
-    <span class="review-preview-item-content">
+            <gl-sprintf v-else :message="__(':%{startLine} to %{endLine}')">
+              <template #startLine>
+                <span class="gl-mr-2" :class="getLineClasses(startLineNumber)">{{
+                  startLineNumber
+                }}</span>
+              </template>
+              <template #endLine>
+                <span class="gl-ml-2" :class="getLineClasses(endLineNumber)">{{
+                  endLineNumber
+                }}</span>
+              </template>
+            </gl-sprintf>
+          </template>
+        </span>
+      </gl-button>
+    </div>
+    <div class="review-preview-item-content -gl-ml-1 gl-pl-7">
       <p>{{ content }}</p>
-    </span>
+    </div>
     <span
       v-if="draft.discussion_id && resolvedStatusMessage"
       class="review-preview-item-footer draft-note-resolution p-0"
diff --git a/app/assets/javascripts/batch_comments/components/review_drawer.vue b/app/assets/javascripts/batch_comments/components/review_drawer.vue
index 978102d1470853..8dff0974f11dc0 100644
--- a/app/assets/javascripts/batch_comments/components/review_drawer.vue
+++ b/app/assets/javascripts/batch_comments/components/review_drawer.vue
@@ -390,7 +390,7 @@ export default {
         v-for="draft in sortedDrafts"
         :key="draft.id"
         :draft="draft"
-        class="gl-mb-3 gl-block"
+        class="pending-comment-item gl-relative gl-mb-5 gl-block"
         @click="onClickDraft"
       />
     </div>
diff --git a/app/assets/stylesheets/page_bundles/merge_request.scss b/app/assets/stylesheets/page_bundles/merge_request.scss
index 0f2da25634aee8..ea6f12f7c95b60 100644
--- a/app/assets/stylesheets/page_bundles/merge_request.scss
+++ b/app/assets/stylesheets/page_bundles/merge_request.scss
@@ -306,3 +306,17 @@ $merge-request-sticky-header-height: 45px;
     transform: translateZ(0);
   }
 }
+
+.pending-comment-item {
+  .review-comment-icon {
+    top: 14px;
+    width: 22px;
+    height: 22px;
+  }
+
+  &:not(:last-child)::before {
+    @include vertical-line(19px, 9px);
+    height: 100%;
+    @apply gl-bg-strong;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 084b30ee252850..e0ee648629c9a8 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -879,19 +879,6 @@ $diff-file-header-top: 11px;
   @apply gl-bg-default gl-border;
 }
 
-.review-preview-item-header {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  margin-bottom: 4px;
-
-  > .bold {
-    display: flex;
-    min-width: 0;
-    line-height: 16px;
-  }
-}
-
 .review-preview-item-footer {
   display: flex;
   align-items: center;
-- 
GitLab