Merge pull request #14840 from overleaf/ii-project-dashboard-action-items

[web] Adjust projects table column widths and action icons

GitOrigin-RevId: 5fea20efa27993485abe7cfa72a0141181efe7ba

services/web/frontend/js/features/project-list/components/table/cells/action-buttons/archive-project-button.tsx

@@ -75,7 +75,7 @@ const ArchiveProjectButtonTooltip = memo(function ArchiveProjectButtonTooltip({
             aria-label={text}
             onClick={handleOpenModal}
           >
-            <Icon type="inbox" />
+            <Icon type="inbox" fw />
           </button>
         </Tooltip>
       )}

services/web/frontend/js/features/project-list/components/table/cells/action-buttons/copy-project-button.tsx

@@ -74,7 +74,7 @@ const CopyProjectButtonTooltip = memo(function CopyProjectButtonTooltip({
             aria-label={text}
             onClick={handleOpenModal}
           >
-            <Icon type="files-o" />
+            <Icon type="files-o" fw />
           </button>
         </Tooltip>
       )}

services/web/frontend/js/features/project-list/components/table/cells/action-buttons/delete-project-button.tsx

@@ -73,7 +73,7 @@ const DeleteProjectButtonTooltip = memo(function DeleteProjectButtonTooltip({
             aria-label={text}
             onClick={handleOpenModal}
           >
-            <Icon type="ban" />
+            <Icon type="ban" fw />
           </button>
         </Tooltip>
       )}

services/web/frontend/js/features/project-list/components/table/cells/action-buttons/download-project-button.tsx

@@ -47,7 +47,7 @@ const DownloadProjectButtonTooltip = memo(
               aria-label={text}
               onClick={downloadProject}
             >
-              <Icon type="cloud-download" />
+              <Icon type="cloud-download" fw />
             </button>
           </Tooltip>
         )}

services/web/frontend/js/features/project-list/components/table/cells/action-buttons/leave-project-button.tsx

@@ -72,7 +72,7 @@ const LeaveProjectButtonTooltip = memo(function LeaveProjectButtonTooltip({
             aria-label={text}
             onClick={handleOpenModal}
           >
-            <Icon type="sign-out" />
+            <Icon type="sign-out" fw />
           </button>
         </Tooltip>
       )}

services/web/frontend/js/features/project-list/components/table/cells/action-buttons/trash-project-button.tsx

@@ -72,7 +72,7 @@ const TrashProjectButtonTooltip = memo(function TrashProjectButtonTooltip({
             aria-label={text}
             onClick={handleOpenModal}
           >
-            <Icon type="trash" />
+            <Icon type="trash" fw />
           </button>
         </Tooltip>
       )}

services/web/frontend/js/features/project-list/components/table/cells/action-buttons/unarchive-project-button.tsx

@@ -51,7 +51,7 @@ const UnarchiveProjectButtonTooltip = memo(
               aria-label={text}
               onClick={handleUnarchiveProject}
             >
-              <Icon type="reply" />
+              <Icon type="reply" fw />
             </button>
           </Tooltip>
         )}

services/web/frontend/js/features/project-list/components/table/cells/action-buttons/untrash-project-button.tsx

@@ -49,7 +49,7 @@ const UntrashProjectButtonTooltip = memo(function UntrashProjectButtonTooltip({
             aria-label={text}
             onClick={handleUntrashProject}
           >
-            <Icon type="reply" />
+            <Icon type="reply" fw />
           </button>
         </Tooltip>
       )}

services/web/frontend/js/features/project-list/components/table/project-list-table.tsx

@@ -14,8 +14,8 @@ function SortBtn({ onClick, text, iconType, screenReaderText }: SortBtnProps) {
       onClick={onClick}
       aria-label={screenReaderText}
     >
-      {text}
-      {iconType ? <Icon className="tablesort" type={iconType} /> : null}
+      <span className="tablesort-text">{text}</span>
+      {iconType && <Icon type={iconType} />}
     </button>
   )
 }

services/web/frontend/stylesheets/app/project-list-react.less

@@ -149,6 +149,7 @@
             display: flex;
             align-items: center;
             width: 100%;
+
             &:hover {
               background-color: @ol-blue-gray-0;
             }
@@ -421,6 +422,7 @@
       color: @ol-type-color;
       padding: 0;
       font-weight: bold;
+      max-width: 100%;
 
       &:hover,
       &:focus {
@@ -429,6 +431,12 @@
       }
     }
 
+    thead th,
+    .table-header-sort-btn {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
     .dash-cell-checkbox {
       width: 5%;
       line-height: 1.55;
@@ -440,26 +448,19 @@
 
     .dash-cell-name {
       width: 50%;
-      overflow: hidden;
-      text-overflow: ellipsis;
     }
 
     .dash-cell-owner {
       width: 20%;
-      overflow: hidden;
-      text-overflow: ellipsis;
     }
 
     .dash-cell-date {
       width: 25%;
-      overflow: hidden;
-      text-overflow: ellipsis;
     }
 
     .dash-cell-actions {
       display: none;
       text-align: right;
-      white-space: nowrap;
     }
 
     .dash-cell-date-owner {
@@ -517,20 +518,20 @@
       }
 
       .dash-cell-name {
-        width: 48%;
+        width: 45%;
       }
 
       .dash-cell-owner {
-        width: 13%;
+        width: 16%;
       }
 
       .dash-cell-date {
-        width: 15%;
+        width: 21%;
       }
 
       .dash-cell-actions {
         display: table-cell;
-        width: 21%;
+        width: 15%;
       }
 
       .project-tools {
@@ -544,7 +545,7 @@
       }
 
       .dash-cell-name {
-        width: 50%;
+        width: 46%;
       }
 
       .dash-cell-owner {
@@ -556,7 +557,13 @@
       }
 
       .dash-cell-actions {
-        width: 18%;
+        width: 22%;
+      }
+
+      tbody {
+        .dash-cell-actions {
+          white-space: nowrap;
+        }
       }
     }
 
@@ -566,7 +573,7 @@
       }
 
       .dash-cell-name {
-        width: 50%;
+        width: 46%;
       }
 
       .dash-cell-owner {
@@ -578,7 +585,7 @@
       }
 
       .dash-cell-actions {
-        width: 13%;
+        width: 17%;
       }
     }
 
@@ -588,7 +595,7 @@
       }
 
       .dash-cell-name {
-        width: 50%;
+        width: 49%;
       }
 
       .dash-cell-owner {
@@ -600,7 +607,7 @@
       }
 
       .dash-cell-actions {
-        width: 13%;
+        width: 14%;
       }
     }
 

services/web/frontend/stylesheets/app/project-list.less

@@ -208,8 +208,7 @@ input.project-list-table-select-item[type='checkbox'] {
   }
 }
 .action-btn {
-  padding: 0 0.3em;
-  margin-left: 0.2em;
+  padding: 0 0.2em;
 }
 
 .first-project {
@@ -466,6 +465,10 @@ i.tablesort {
   padding-left: 8px;
 }
 
+.tablesort-text {
+  padding-right: 8px;
+}
+
 .tag-label {
   margin-left: @line-height-computed / 4;
   position: relative;