Merge pull request #20733 from overleaf/dp-align-change-icon

Align change icon with first line of change

GitOrigin-RevId: 319ed7ba7984fae52f31bd37a6d718ca07aa9009

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"
                 />
 

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;