From fa314fe5b09bab9bb04eca3d5f26a13fcf93d31f Mon Sep 17 00:00:00 2001
From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>
Date: Thu, 18 Jan 2024 16:26:53 +0200
Subject: [PATCH] Merge pull request #16509 from
 overleaf/ii-rp-update-entry-positions

[web] Review panel entry positions and long user names

GitOrigin-RevId: 3a596bd90bab2c87b2efae5eb812ffc5e5a1580f
---
 .../hooks/use-review-panel-state.ts            |  6 ++++++
 .../entries/aggregate-change-entry.tsx         | 18 +++++++++++-------
 .../review-panel/entries/change-entry.tsx      | 18 +++++++++++-------
 .../stylesheets/app/editor/review-panel.less   |  4 ++++
 4 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts b/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts
index cd62f5b066..c3681b701d 100644
--- a/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts
+++ b/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts
@@ -1492,6 +1492,12 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
     }
   }, [subView])
 
+  useEffect(() => {
+    if (Object.keys(users).length) {
+      handleLayoutChange({ async: true })
+    }
+  }, [users])
+
   const values = useMemo<ReviewPanelStateReactIde['values']>(
     () => ({
       collapsed,
diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/entries/aggregate-change-entry.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/entries/aggregate-change-entry.tsx
index 9b9e962aa2..1c124aa9de 100644
--- a/services/web/frontend/js/features/source-editor/components/review-panel/entries/aggregate-change-entry.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/entries/aggregate-change-entry.tsx
@@ -119,14 +119,18 @@ function AggregateChangeEntry({
               )}
             </div>
             <div className="rp-entry-metadata">
-              {formatTime(timestamp, 'MMM D, Y h:mm A')}
-              &nbsp;&bull;&nbsp;
+              <span className="rp-entry-metadata-element">
+                {formatTime(timestamp, 'MMM D, Y h:mm A')}
+              </span>
               {user && (
-                <span
-                  className="rp-entry-user"
-                  style={{ color: `hsl(${user.hue}, 70%, 40%)` }}
-                >
-                  {user.name ?? t('anonymous')}
+                <span className="rp-entry-metadata-element">
+                  &nbsp;&bull;&nbsp;
+                  <span
+                    className="rp-entry-user"
+                    style={{ color: `hsl(${user.hue}, 70%, 40%)` }}
+                  >
+                    {user.name ?? t('anonymous')}
+                  </span>
                 </span>
               )}
             </div>
diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/entries/change-entry.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/entries/change-entry.tsx
index f28d2e5eaa..5933350bc2 100644
--- a/services/web/frontend/js/features/source-editor/components/review-panel/entries/change-entry.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/entries/change-entry.tsx
@@ -117,14 +117,18 @@ function ChangeEntry({
               </span>
             </div>
             <div className="rp-entry-metadata">
-              {formatTime(timestamp, 'MMM D, Y h:mm A')}
-              &nbsp;&bull;&nbsp;
+              <span className="rp-entry-metadata-element">
+                {formatTime(timestamp, 'MMM D, Y h:mm A')}
+              </span>
               {user && (
-                <span
-                  className="rp-entry-user"
-                  style={{ color: `hsl(${user.hue}, 70%, 40%)` }}
-                >
-                  {user.name ?? t('anonymous')}
+                <span className="rp-entry-metadata-element">
+                  &nbsp;&bull;&nbsp;
+                  <span
+                    className="rp-entry-user"
+                    style={{ color: `hsl(${user.hue}, 70%, 40%)` }}
+                  >
+                    {user.name ?? t('anonymous')}
+                  </span>
                 </span>
               )}
             </div>
diff --git a/services/web/frontend/stylesheets/app/editor/review-panel.less b/services/web/frontend/stylesheets/app/editor/review-panel.less
index 73ca1119e3..80d7e2b394 100644
--- a/services/web/frontend/stylesheets/app/editor/review-panel.less
+++ b/services/web/frontend/stylesheets/app/editor/review-panel.less
@@ -469,6 +469,10 @@
   font-size: @rp-small-font-size;
 }
 
+.rp-entry-metadata-element {
+  display: inline-block;
+}
+
 .rp-entry-user {
   font-weight: @rp-semibold-weight;
   font-style: normal;