Merge pull request #16509 from overleaf/ii-rp-update-entry-positions

[web] Review panel entry positions and long user names

GitOrigin-RevId: 3a596bd90bab2c87b2efae5eb812ffc5e5a1580f

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,

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>

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>

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;