From c7a80f922848b5d40df3b876dd3fa99763464489 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Thu, 25 May 2023 09:48:04 -0700
Subject: [PATCH] History migration: Wrap history version item texts in version
 history list (#12961)

Texts that need individual wrapping so they won't overflow the history item:

- long file name
- long label name
- long tooltip text
- long user email

---------

Co-authored-by: Ilkin Ismailov <ilkin.ismailov@overleaf.com>
GitOrigin-RevId: 3f75c4173dd59524de1148b22bcbc1d856c021eb
---
 .../change-list/dropdown/actions-dropdown.tsx |  1 +
 .../change-list/history-version-details.tsx   |  2 +-
 .../change-list/history-version.tsx           | 36 +++++++++----------
 .../change-list/label-list-item.tsx           | 30 ++++++++--------
 .../components/change-list/tag-tooltip.tsx    |  2 +-
 .../user-name-with-colored-badge.tsx          |  2 +-
 .../stylesheets/app/editor/history-react.less | 24 +++++++++----
 .../stylesheets/components/badge.less         | 13 +++++--
 8 files changed, 66 insertions(+), 44 deletions(-)

diff --git a/services/web/frontend/js/features/history/components/change-list/dropdown/actions-dropdown.tsx b/services/web/frontend/js/features/history/components/change-list/dropdown/actions-dropdown.tsx
index 99e1f8d4fd..95f07d6677 100644
--- a/services/web/frontend/js/features/history/components/change-list/dropdown/actions-dropdown.tsx
+++ b/services/web/frontend/js/features/history/components/change-list/dropdown/actions-dropdown.tsx
@@ -51,6 +51,7 @@ function ActionsDropdown({
       pullRight
       open={isOpened}
       onToggle={open => setIsOpened(open)}
+      className="pull-right"
     >
       <DropdownToggleWithTooltip
         bsRole="toggle"
diff --git a/services/web/frontend/js/features/history/components/change-list/history-version-details.tsx b/services/web/frontend/js/features/history/components/change-list/history-version-details.tsx
index 770e5a5e02..bc0d8a4498 100644
--- a/services/web/frontend/js/features/history/components/change-list/history-version-details.tsx
+++ b/services/web/frontend/js/features/history/components/change-list/history-version-details.tsx
@@ -33,7 +33,7 @@ function HistoryVersionDetails({
     // TODO: Sort out accessibility for this
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     <div
-      className={classnames('history-version-details', {
+      className={classnames('history-version-details clearfix', {
         'history-version-selected': selected,
         'history-version-selectable': selectable,
       })}
diff --git a/services/web/frontend/js/features/history/components/change-list/history-version.tsx b/services/web/frontend/js/features/history/components/change-list/history-version.tsx
index f5b3d8ddbd..b5fa4af67b 100644
--- a/services/web/frontend/js/features/history/components/change-list/history-version.tsx
+++ b/services/web/frontend/js/features/history/components/change-list/history-version.tsx
@@ -65,6 +65,24 @@ function HistoryVersion({
           updateRange={updateRangeForUpdate(update)}
           selectable={selectable}
         >
+          {faded ? null : (
+            <HistoryDropdown
+              id={`${update.fromV}_${update.toV}`}
+              isOpened={dropdownOpen}
+              setIsOpened={(isOpened: boolean) =>
+                setActiveDropdownItem({ item: update, isOpened })
+              }
+            >
+              {dropdownActive ? (
+                <VersionDropdownContent
+                  selected={selected}
+                  update={update}
+                  projectId={projectId}
+                  closeDropdownForItem={closeDropdownForItem}
+                />
+              ) : null}
+            </HistoryDropdown>
+          )}
           <div className="history-version-main-details">
             <time
               className="history-version-metadata-time"
@@ -91,24 +109,6 @@ function HistoryVersion({
             />
             <Origin origin={update.meta.origin} />
           </div>
-          {faded ? null : (
-            <HistoryDropdown
-              id={`${update.fromV}_${update.toV}`}
-              isOpened={dropdownOpen}
-              setIsOpened={(isOpened: boolean) =>
-                setActiveDropdownItem({ item: update, isOpened })
-              }
-            >
-              {dropdownActive ? (
-                <VersionDropdownContent
-                  selected={selected}
-                  update={update}
-                  projectId={projectId}
-                  closeDropdownForItem={closeDropdownForItem}
-                />
-              ) : null}
-            </HistoryDropdown>
-          )}
         </HistoryVersionDetails>
       </div>
     </>
diff --git a/services/web/frontend/js/features/history/components/change-list/label-list-item.tsx b/services/web/frontend/js/features/history/components/change-list/label-list-item.tsx
index 8cf95d64b6..ee4417043c 100644
--- a/services/web/frontend/js/features/history/components/change-list/label-list-item.tsx
+++ b/services/web/frontend/js/features/history/components/change-list/label-list-item.tsx
@@ -68,6 +68,21 @@ function LabelListItem({
       selectable={selectable}
       setSelection={setSelection}
     >
+      <HistoryDropdown
+        id={version.toString()}
+        isOpened={dropdownOpen}
+        setIsOpened={setIsOpened}
+      >
+        {dropdownActive ? (
+          <LabelDropdownContent
+            selected={selected}
+            version={version}
+            versionTimestamp={toVTimestamp}
+            projectId={projectId}
+            closeDropdownForItem={closeDropdownForItem}
+          />
+        ) : null}
+      </HistoryDropdown>
       <div className="history-version-main-details">
         {labels.map(label => (
           <div key={label.id} className="history-version-label">
@@ -99,21 +114,6 @@ function LabelListItem({
           </div>
         ))}
       </div>
-      <HistoryDropdown
-        id={version.toString()}
-        isOpened={dropdownOpen}
-        setIsOpened={setIsOpened}
-      >
-        {dropdownActive ? (
-          <LabelDropdownContent
-            selected={selected}
-            version={version}
-            versionTimestamp={toVTimestamp}
-            projectId={projectId}
-            closeDropdownForItem={closeDropdownForItem}
-          />
-        ) : null}
-      </HistoryDropdown>
     </HistoryVersionDetails>
   )
 }
diff --git a/services/web/frontend/js/features/history/components/change-list/tag-tooltip.tsx b/services/web/frontend/js/features/history/components/change-list/tag-tooltip.tsx
index 68b3897f95..4af7345ab0 100644
--- a/services/web/frontend/js/features/history/components/change-list/tag-tooltip.tsx
+++ b/services/web/frontend/js/features/history/components/change-list/tag-tooltip.tsx
@@ -142,7 +142,7 @@ function TagTooltip({ label, currentUserId, showTooltip }: LabelBadgesProps) {
       description={
         <div className="history-version-label-tooltip">
           <div className="history-version-label-tooltip-row">
-            <b>
+            <b className="history-version-label-tooltip-row-comment">
               <Icon type="tag" fw />
               {label.comment}
             </b>
diff --git a/services/web/frontend/js/features/history/components/change-list/user-name-with-colored-badge.tsx b/services/web/frontend/js/features/history/components/change-list/user-name-with-colored-badge.tsx
index 40f5faa4c9..9a82dd62ea 100644
--- a/services/web/frontend/js/features/history/components/change-list/user-name-with-colored-badge.tsx
+++ b/services/web/frontend/js/features/history/components/change-list/user-name-with-colored-badge.tsx
@@ -31,7 +31,7 @@ function UserNameWithColoredBadge({
         className="history-version-user-badge-color"
         style={{ backgroundColor: getUserColor(user) }}
       />
-      {userName}
+      <span className="history-version-user-badge-text">{userName}</span>
     </>
   )
 }
diff --git a/services/web/frontend/stylesheets/app/editor/history-react.less b/services/web/frontend/stylesheets/app/editor/history-react.less
index 5f11f0a08a..ce31d6011e 100644
--- a/services/web/frontend/stylesheets/app/editor/history-react.less
+++ b/services/web/frontend/stylesheets/app/editor/history-react.less
@@ -94,10 +94,9 @@ history-root {
   }
 
   .history-version-details {
-    display: flex;
-    align-items: flex-start;
     padding-top: 8px;
     padding-bottom: 8px;
+    position: relative;
 
     &.history-version-selectable {
       cursor: pointer;
@@ -155,6 +154,11 @@ history-root {
     border-radius: 2px;
   }
 
+  .history-version-user-badge-text {
+    overflow-wrap: anywhere;
+    flex: 1;
+  }
+
   .history-version-day,
   .history-version-change-action,
   .history-version-metadata-users,
@@ -163,8 +167,13 @@ history-root {
     color: @neutral-70;
   }
 
+  .history-version-change-action {
+    overflow-wrap: anywhere;
+  }
+
   .history-version-change-doc {
     color: @neutral-90;
+    overflow-wrap: anywhere;
   }
 
   .history-version-divider {
@@ -175,6 +184,9 @@ history-root {
   .history-version-badge {
     margin-bottom: 4px;
     margin-right: 10px;
+    height: unset;
+    white-space: normal;
+    overflow-wrap: anywhere;
   }
 
   .history-version-label {
@@ -232,10 +244,6 @@ history-root {
     }
   }
 
-  .history-version-main-details {
-    flex: 1;
-  }
-
   .history-loading-panel {
     padding-top: 10rem;
     font-family: @font-family-serif;
@@ -315,6 +323,10 @@ history-root {
   &-row {
     margin-bottom: 6.25px;
 
+    &-comment {
+      overflow-wrap: anywhere;
+    }
+
     &:last-child {
       margin-bottom: initial;
     }
diff --git a/services/web/frontend/stylesheets/components/badge.less b/services/web/frontend/stylesheets/components/badge.less
index 9b9cd18bef..defb091148 100644
--- a/services/web/frontend/stylesheets/components/badge.less
+++ b/services/web/frontend/stylesheets/components/badge.less
@@ -5,7 +5,8 @@
   align-items: center;
   overflow: hidden;
   height: @size;
-  padding: @padding;
+  min-height: @size;
+  padding: 0 @padding;
   white-space: nowrap;
   color: @ol-blue-gray-6;
   background-color: @neutral-20;
@@ -19,12 +20,20 @@
     margin-right: 2px;
   }
 
+  &-comment {
+    flex: 1;
+  }
+
   &-close {
     .reset-button;
     width: @size;
     margin-left: 4px;
-    margin-right: -@padding;
     font-size: 20px;
+    height: @size;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: -@padding;
 
     &:hover {
       background-color: @neutral-40;