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

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"

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,
       })}

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

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>
   )
 }

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>

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>
     </>
   )
 }

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;
     }

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;