48016 frontend [ workflows ] keep performer avatars circular in table view

frontend/src/public/components/UI/Avatar/Avatar.css

@@ -8,12 +8,18 @@
   border-radius: 50%;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
 
   &.is-group {
     color: var(--pneumatic-color-black72);
   }
 }
 
+img.avatar {
+  max-width: none;
+  object-fit: cover;
+}
+
 .avatar_xxl {
   width: 80px;
   height: 80px;

frontend/src/public/components/WorkflowCardUsers/WorkflowCardUsers.css

@@ -4,14 +4,37 @@
 }
 
 .card-user {
-  margin-left: -4px;
-  display: flex;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
 
-  &:first-child {
-    margin-left: 0;
+  img {
+    width: 100%;
+    height: 100%;
+    vertical-align: unset;
+    border-radius: 50%;
+    object-fit: cover;
   }
 }
 
+.card-users > .card-user:not(:first-child) {
+  margin-left: -4px;
+}
+
+.card-users button {
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  flex-shrink: 0;
+}
+
+.card-users > button:not(:first-child) {
+  margin-left: -4px;
+}
+
 .card-users__more {
   margin-left: 8px;
   font-size: 13px;

frontend/src/public/components/WorkflowCardUsers/utils/getPerformersAvatarsWidth.ts

@@ -0,0 +1,10 @@
+const AVATAR_SIZE = 20;
+const AVATAR_OVERLAP = 4;
+
+export const getPerformersAvatarsWidth = (performerCount: number): number => {
+  if (performerCount <= 0) {
+    return AVATAR_SIZE;
+  }
+
+  return AVATAR_SIZE + (performerCount - 1) * (AVATAR_SIZE - AVATAR_OVERLAP);
+};

frontend/src/public/components/Workflows/WorkflowLog/PopupCommentField/PopupCommentField.css

@@ -19,6 +19,7 @@
 .comment-field__avatar-container {
   margin-right: 16px;
   align-self: flex-start;
+  flex-shrink: 0;
 
   @media (--mobile) {
     display: none;
@@ -29,6 +30,7 @@
   width: 40px;
   height: 40px;
   border-radius: 50%;
+  object-fit: cover;
 
   @media (--mobile) {
     width: 32px;

frontend/src/public/components/Workflows/WorkflowLog/WorkflowLogEvents/WorkflowLogTaskComment/WorkflowLogTaskComment.css

@@ -3,6 +3,7 @@
 
   &__avatar {
     margin-right: 1.6rem;
+    flex-shrink: 0;
 
     @media (--mobile) {
       margin-right: 1rem;

frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/Columns/Cells/PerformerColumn/PerformerColumns.css

@@ -1,3 +1,4 @@
 .performer-column-width {
   overflow: hidden;
+  max-width: 100%;
 }

frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/Columns/Cells/WorkflowTableConstants.ts

@@ -1,10 +1,14 @@
+import { getPerformersAvatarsWidth } from '../../../../../WorkflowCardUsers/utils/getPerformersAvatarsWidth';
+
+const PERFORMER_COLUMN_DEFAULT_AVATARS = 5;
+
 export const ETableViewFieldsWidth = {
   'system-column-workflow': 376,
   'system-column-templateName': 304,
   'system-column-starter': 82,
   'system-column-progress': 80,
   'system-column-step': 304,
-  'system-column-performer': 80,
+  'system-column-performer': getPerformersAvatarsWidth(PERFORMER_COLUMN_DEFAULT_AVATARS),
   number: 80,
   text: 528,
   string: 192,
@@ -23,7 +27,7 @@ export const EColumnWidthMinWidth = {
   'system-column-starter': 82,
   'system-column-progress': 80,
   'system-column-step': 80,
-  'system-column-performer': 80,
+  'system-column-performer': getPerformersAvatarsWidth(PERFORMER_COLUMN_DEFAULT_AVATARS),
   number: 80,
   text: 80,
   string: 80,

frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx

@@ -31,6 +31,7 @@ import { useIsTableWiderThanScreen, useWorkflowsTableRef } from './WorkflowsTabl
 
 import styles from './WorkflowsTable.css';
 import { EColumnWidthMinWidth, ETableViewFieldsWidth } from './Columns/Cells/WorkflowTableConstants';
+import { getPerformersAvatarsWidth } from '../../../WorkflowCardUsers/utils/getPerformersAvatarsWidth';
 import { WorkflowsTableActions } from './WorkflowsTableActions';
 import { useCheckDevice } from '../../../../hooks/useCheckDevice';
 import { createResizeHandler } from './utils/resizeUtils';
@@ -224,6 +225,26 @@ export function WorkflowsTable({
       workflowsList.items.length === 0 &&
       String(lastLoadedTemplateIdForTable) === String(currentTemplateId));
 
+  const maxPerformersCount = useMemo(
+    () =>
+      workflowsList.items.reduce((max, workflow) => Math.max(max, workflow.selectedUsers?.length ?? 0), 0),
+    [workflowsList.items],
+  );
+
+  const performerColumnMinWidth = useMemo(
+    () => getPerformersAvatarsWidth(maxPerformersCount),
+    [maxPerformersCount],
+  );
+
+  const performerColumnWidth = useMemo(
+    () =>
+      Math.max(
+        savedGlobalWidths['system-column-performer'] || ETableViewFieldsWidth['system-column-performer'],
+        performerColumnMinWidth,
+      ),
+    [performerColumnMinWidth, savedGlobalWidths],
+  );
+
   const columns: Column<TableColumns>[] = useMemo(() => {
     if (shouldSkeletonOptionalTable) {
       return cashTableStructureRef.current;
@@ -313,8 +334,8 @@ export function WorkflowsTable({
             ),
             accessor: 'system-column-performer',
             Cell: ColumnCells.PerformerColumn,
-            width: savedGlobalWidths['system-column-performer'] || ETableViewFieldsWidth['system-column-performer'],
-            minWidth: EColumnWidthMinWidth['system-column-performer'],
+            width: performerColumnWidth,
+            minWidth: performerColumnMinWidth,
             columnType: 'system-column-performer',
           },
         ]
@@ -350,6 +371,8 @@ export function WorkflowsTable({
     workflowStartersCounters,
     fieldsColumns.length,
     selectedFieldsSet,
+    performerColumnWidth,
+    performerColumnMinWidth,
   ]);
 
   const data = useMemo((): TableColumns[] => {
@@ -377,21 +400,30 @@ export function WorkflowsTable({
   };
 
   useEffect(() => {
-    if (workflowsLoadingStatus === EWorkflowsLoadingStatus.Loaded) {
-      setColWidths((prev) => {
-        const newWidths = { ...prev };
-
-        columns.forEach((col) => {
-          const id = col.accessor as string;
-          if (!newWidths[id]) {
-            newWidths[id] = col.width as number;
-          }
-        });
-
-        return newWidths;
-      });
+    if (
+      workflowsLoadingStatus !== EWorkflowsLoadingStatus.Loaded &&
+      workflowsLoadingStatus !== EWorkflowsLoadingStatus.LoadingNextPage
+    ) {
+      return;
     }
-  }, [columns.length, workflowsLoadingStatus]);
+
+    setColWidths((prev) => {
+      const newWidths = { ...prev };
+
+      columns.forEach((col) => {
+        const id = col.accessor as string;
+        const colWidth = col.width as number;
+
+        if (id === 'system-column-performer' && newWidths[id]) {
+          newWidths[id] = Math.max(newWidths[id], colWidth);
+        } else if (!newWidths[id]) {
+          newWidths[id] = colWidth;
+        }
+      });
+
+      return newWidths;
+    });
+  }, [columns, workflowsLoadingStatus, performerColumnWidth]);
 
   const handleMouseDown = createResizeHandler(colWidths, setColWidths, currentUser?.id, templatesIdsFilter[0]);