From fac379b3a8ffac25f9c7e065824584568a066ffb Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Fri, 4 Oct 2024 10:15:57 +0100
Subject: [PATCH] Merge pull request #20733 from overleaf/dp-align-change-icon

Align change icon with first line of change

GitOrigin-RevId: 319ed7ba7984fae52f31bd37a6d718ca07aa9009
---
 .../review-panel-new/components/review-panel-change.tsx    | 6 +++---
 .../frontend/stylesheets/app/editor/review-panel-new.less  | 7 ++++++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx
index 047b01e98f..63dfdac714 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx
@@ -138,12 +138,12 @@ export const ReviewPanelChange = memo<{
               <>
                 {aggregate ? (
                   <MaterialIcon
-                    className="review-panel-entry-icon review-panel-entry-icon-changed"
+                    className="review-panel-entry-icon review-panel-entry-change-icon review-panel-entry-icon-changed"
                     type="edit"
                   />
                 ) : (
                   <MaterialIcon
-                    className="review-panel-entry-icon review-panel-entry-icon-accept"
+                    className="review-panel-entry-icon review-panel-entry-change-icon review-panel-entry-icon-accept"
                     type="add_circle"
                   />
                 )}
@@ -173,7 +173,7 @@ export const ReviewPanelChange = memo<{
             {'d' in change.op && (
               <>
                 <MaterialIcon
-                  className="review-panel-entry-icon review-panel-entry-icon-reject"
+                  className="review-panel-entry-icon review-panel-entry-change-icon review-panel-entry-icon-reject"
                   type="delete"
                 />
 
diff --git a/services/web/frontend/stylesheets/app/editor/review-panel-new.less b/services/web/frontend/stylesheets/app/editor/review-panel-new.less
index 36f54345a1..f51149d345 100644
--- a/services/web/frontend/stylesheets/app/editor/review-panel-new.less
+++ b/services/web/frontend/stylesheets/app/editor/review-panel-new.less
@@ -88,9 +88,10 @@
 
   .review-panel-change-body {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     color: @content-secondary;
     gap: @spacing-02;
+    overflow-wrap: anywhere;
   }
 
   .review-panel-content-highlight {
@@ -108,6 +109,10 @@
     font-size: 16px;
   }
 
+  .review-panel-entry-change-icon {
+    margin-top: -2px;
+  }
+
   .review-panel-entry-icon-accept {
     background-color: @green-10;
     color: @green-50;