In history react file tree, always show badge (stick to the right side) and truncate long filename with ellipsis (#12897)

GitOrigin-RevId: 2e982f03b7a60e506f061a2c5bf1ab3d93dfccf5

services/web/frontend/js/features/history/components/file-tree/history-file-tree-item.tsx

@@ -17,20 +17,20 @@ export default function HistoryFileTreeItem({
   return (
     <div className="history-file-tree-item" role="presentation">
       {icons}
-      <button className="history-file-tree-item-button">
-        <span
-          className={classNames('history-file-tree-item-button-text', {
+      <div className="history-file-tree-item-name-wrapper">
+        <div
+          className={classNames('history-file-tree-item-name', {
             strikethrough: operation === 'removed',
           })}
         >
           {name}
-        </span>
+        </div>
         {operation ? (
-          <Badge className="history-file-tree-item-button-badge" size="sm">
+          <Badge className="history-file-tree-item-badge" size="sm">
             {operation}
           </Badge>
         ) : null}
-      </button>
+      </div>
     </div>
   )
 }

services/web/frontend/stylesheets/app/editor/history-react.less

@@ -382,6 +382,7 @@ history-root {
     li {
       line-height: @file-tree-line-height;
       position: relative;
+      margin-left: 8px;
 
       &:focus {
         outline: none;
@@ -391,9 +392,9 @@ history-root {
         color: @file-tree-item-color;
         cursor: pointer;
         white-space: nowrap;
-        overflow: hidden;
-        text-overflow: clip;
         user-select: none;
+        display: flex;
+        align-items: center;
 
         &:focus {
           outline: none;
@@ -418,29 +419,30 @@ history-root {
           }
         }
 
-        .history-file-tree-item-button {
+        .history-file-tree-item-name-wrapper {
+          display: flex;
+          align-items: center;
           width: 100%;
           overflow: hidden;
-          text-overflow: ellipsis;
-          text-align: left;
-          padding-right: 40px;
-          font-weight: normal;
-          display: inline-flex;
-          flex-direction: row;
-          align-items: center;
-          justify-content: space-between;
 
-          .history-file-tree-item-button-text {
-            display: inline-flex;
-            margin-right: 5px;
+          .history-file-tree-item-name {
+            margin-right: @margin-xs;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            text-align: left;
+            font-weight: normal;
+            flex-grow: 1;
 
             &.strikethrough {
               text-decoration: line-through;
             }
           }
 
-          .history-file-tree-item-button-badge {
+          .history-file-tree-item-badge {
             text-transform: capitalize;
+            font-weight: normal;
+            margin-right: @margin-sm;
+            flex-shrink: 0;
 
             &:hover {
               background-color: @neutral-20;
@@ -452,6 +454,8 @@ history-root {
       i.fa {
         color: @file-tree-item-icon-color;
         font-size: 14px;
+        display: inline-flex;
+        flex-shrink: 0;
 
         &.file-tree-icon {
           margin-right: 4px;