From fd61ab9262855ad8589c422b0605931ef5a6a1b0 Mon Sep 17 00:00:00 2001 From: aicarma-artyom-maslov Date: Thu, 9 Jul 2026 17:23:01 +0300 Subject: [PATCH 1/6] 48016 fix(workflows table): keep performer avatars circular in table view --- .../WorkflowCardUsers/WorkflowCardUsers.css | 20 ++++++++++++- .../utils/getPerformersAvatarsWidth.ts | 10 +++++++ .../PerformerColumn/PerformerColumns.css | 2 +- .../Columns/Cells/WorkflowTableConstants.ts | 8 +++-- .../WorkflowsTable/WorkflowsTable.tsx | 29 ++++++++++++++++--- 5 files changed, 61 insertions(+), 8 deletions(-) create mode 100644 frontend/src/public/components/WorkflowCardUsers/utils/getPerformersAvatarsWidth.ts diff --git a/frontend/src/public/components/WorkflowCardUsers/WorkflowCardUsers.css b/frontend/src/public/components/WorkflowCardUsers/WorkflowCardUsers.css index ad9b88ca9..9b8010561 100644 --- a/frontend/src/public/components/WorkflowCardUsers/WorkflowCardUsers.css +++ b/frontend/src/public/components/WorkflowCardUsers/WorkflowCardUsers.css @@ -5,11 +5,29 @@ .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 button { + padding: 0; + cursor: pointer; + background: transparent; + border: none; + flex-shrink: 0; } .card-users__more { diff --git a/frontend/src/public/components/WorkflowCardUsers/utils/getPerformersAvatarsWidth.ts b/frontend/src/public/components/WorkflowCardUsers/utils/getPerformersAvatarsWidth.ts new file mode 100644 index 000000000..ace7de330 --- /dev/null +++ b/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); +}; diff --git a/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/Columns/Cells/PerformerColumn/PerformerColumns.css b/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/Columns/Cells/PerformerColumn/PerformerColumns.css index 326becebd..a80c14321 100644 --- a/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/Columns/Cells/PerformerColumn/PerformerColumns.css +++ b/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/Columns/Cells/PerformerColumn/PerformerColumns.css @@ -1,3 +1,3 @@ .performer-column-width { - overflow: hidden; + width: fit-content; } diff --git a/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/Columns/Cells/WorkflowTableConstants.ts b/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/Columns/Cells/WorkflowTableConstants.ts index 27e1b4054..63f1b8987 100644 --- a/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/Columns/Cells/WorkflowTableConstants.ts +++ b/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, diff --git a/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx b/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx index 17057e692..68235e537 100644 --- a/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx +++ b/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,21 @@ 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 performerColumnWidth = useMemo( + () => + Math.max( + savedGlobalWidths['system-column-performer'] || ETableViewFieldsWidth['system-column-performer'], + getPerformersAvatarsWidth(maxPerformersCount), + ), + [maxPerformersCount, savedGlobalWidths], + ); + const columns: Column[] = useMemo(() => { if (shouldSkeletonOptionalTable) { return cashTableStructureRef.current; @@ -313,7 +329,7 @@ export function WorkflowsTable({ ), accessor: 'system-column-performer', Cell: ColumnCells.PerformerColumn, - width: savedGlobalWidths['system-column-performer'] || ETableViewFieldsWidth['system-column-performer'], + width: performerColumnWidth, minWidth: EColumnWidthMinWidth['system-column-performer'], columnType: 'system-column-performer', }, @@ -350,6 +366,7 @@ export function WorkflowsTable({ workflowStartersCounters, fieldsColumns.length, selectedFieldsSet, + performerColumnWidth, ]); const data = useMemo((): TableColumns[] => { @@ -383,15 +400,19 @@ export function WorkflowsTable({ columns.forEach((col) => { const id = col.accessor as string; - if (!newWidths[id]) { - newWidths[id] = col.width as number; + const colWidth = col.width as number; + + if (id === 'system-column-performer') { + newWidths[id] = Math.max(newWidths[id] ?? 0, colWidth); + } else if (!newWidths[id]) { + newWidths[id] = colWidth; } }); return newWidths; }); } - }, [columns.length, workflowsLoadingStatus]); + }, [columns, workflowsLoadingStatus, performerColumnWidth]); const handleMouseDown = createResizeHandler(colWidths, setColWidths, currentUser?.id, templatesIdsFilter[0]); From fa2f7788d991388d69097b7c25db11e19ea2ab87 Mon Sep 17 00:00:00 2001 From: aicarma-artyom-maslov Date: Thu, 9 Jul 2026 17:35:00 +0300 Subject: [PATCH 2/6] 48016 fix(workflows): apply avatar overlap margin to filter buttons --- .../WorkflowCardUsers/WorkflowCardUsers.css | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/frontend/src/public/components/WorkflowCardUsers/WorkflowCardUsers.css b/frontend/src/public/components/WorkflowCardUsers/WorkflowCardUsers.css index 9b8010561..000f4fc70 100644 --- a/frontend/src/public/components/WorkflowCardUsers/WorkflowCardUsers.css +++ b/frontend/src/public/components/WorkflowCardUsers/WorkflowCardUsers.css @@ -4,15 +4,10 @@ } .card-user { - margin-left: -4px; width: 20px; height: 20px; flex-shrink: 0; - &:first-child { - margin-left: 0; - } - img { width: 100%; height: 100%; @@ -22,14 +17,24 @@ } } +.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; From 32fdfe60d64176f25ef4d278f2133fb5264ec604 Mon Sep 17 00:00:00 2001 From: aicarma-artyom-maslov Date: Thu, 9 Jul 2026 17:43:08 +0300 Subject: [PATCH 3/6] 48016 fix(workflows): align performer column resize min-width with avatar count --- .../PerformerColumn/PerformerColumns.css | 3 +- .../WorkflowsTable/WorkflowsTable.tsx | 51 +++++++++++-------- 2 files changed, 33 insertions(+), 21 deletions(-) diff --git a/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/Columns/Cells/PerformerColumn/PerformerColumns.css b/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/Columns/Cells/PerformerColumn/PerformerColumns.css index a80c14321..293fbcecf 100644 --- a/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/Columns/Cells/PerformerColumn/PerformerColumns.css +++ b/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/Columns/Cells/PerformerColumn/PerformerColumns.css @@ -1,3 +1,4 @@ .performer-column-width { - width: fit-content; + overflow: hidden; + max-width: 100%; } diff --git a/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx b/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx index 68235e537..c67609bb9 100644 --- a/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx +++ b/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx @@ -231,13 +231,18 @@ export function WorkflowsTable({ [workflowsList.items], ); + const performerColumnMinWidth = useMemo( + () => getPerformersAvatarsWidth(maxPerformersCount), + [maxPerformersCount], + ); + const performerColumnWidth = useMemo( () => Math.max( savedGlobalWidths['system-column-performer'] || ETableViewFieldsWidth['system-column-performer'], - getPerformersAvatarsWidth(maxPerformersCount), + performerColumnMinWidth, ), - [maxPerformersCount, savedGlobalWidths], + [performerColumnMinWidth, savedGlobalWidths], ); const columns: Column[] = useMemo(() => { @@ -330,7 +335,7 @@ export function WorkflowsTable({ accessor: 'system-column-performer', Cell: ColumnCells.PerformerColumn, width: performerColumnWidth, - minWidth: EColumnWidthMinWidth['system-column-performer'], + minWidth: performerColumnMinWidth, columnType: 'system-column-performer', }, ] @@ -367,6 +372,7 @@ export function WorkflowsTable({ fieldsColumns.length, selectedFieldsSet, performerColumnWidth, + performerColumnMinWidth, ]); const data = useMemo((): TableColumns[] => { @@ -394,24 +400,29 @@ export function WorkflowsTable({ }; useEffect(() => { - if (workflowsLoadingStatus === EWorkflowsLoadingStatus.Loaded) { - 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] = Math.max(newWidths[id] ?? 0, colWidth); - } else if (!newWidths[id]) { - newWidths[id] = colWidth; - } - }); - - return newWidths; - }); + if ( + workflowsLoadingStatus !== EWorkflowsLoadingStatus.Loaded && + workflowsLoadingStatus !== EWorkflowsLoadingStatus.LoadingNextPage + ) { + return; } + + 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] = Math.max(newWidths[id] ?? 0, colWidth); + } else if (!newWidths[id]) { + newWidths[id] = colWidth; + } + }); + + return newWidths; + }); }, [columns, workflowsLoadingStatus, performerColumnWidth]); const handleMouseDown = createResizeHandler(colWidths, setColWidths, currentUser?.id, templatesIdsFilter[0]); From 5f93f133ad78eddc816041abcd4478b6f2f00c59 Mon Sep 17 00:00:00 2001 From: aicarma-artyom-maslov Date: Thu, 9 Jul 2026 17:53:09 +0300 Subject: [PATCH 4/6] 48016 fix(workflows): reset performer column width when loaded rows change --- .../WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx b/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx index c67609bb9..01074bda8 100644 --- a/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx +++ b/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx @@ -415,7 +415,7 @@ export function WorkflowsTable({ const colWidth = col.width as number; if (id === 'system-column-performer') { - newWidths[id] = Math.max(newWidths[id] ?? 0, colWidth); + newWidths[id] = colWidth; } else if (!newWidths[id]) { newWidths[id] = colWidth; } From 9945da6fc9bfb12a9f80207a953796555306ef95 Mon Sep 17 00:00:00 2001 From: aicarma-artyom-maslov Date: Thu, 9 Jul 2026 18:06:20 +0300 Subject: [PATCH 5/6] 48016 fix(workflows): preserve user-resized performer column width on load --- .../WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx b/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx index 01074bda8..2727d056d 100644 --- a/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx +++ b/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx @@ -414,8 +414,8 @@ export function WorkflowsTable({ const id = col.accessor as string; const colWidth = col.width as number; - if (id === 'system-column-performer') { - newWidths[id] = colWidth; + if (id === 'system-column-performer' && newWidths[id]) { + newWidths[id] = Math.max(newWidths[id], colWidth); } else if (!newWidths[id]) { newWidths[id] = colWidth; } From 33a00f1ec2d93fe3e7a56fb75806e3faf806ef46 Mon Sep 17 00:00:00 2001 From: aicarma-artyom-maslov Date: Thu, 9 Jul 2026 23:57:52 +0300 Subject: [PATCH 6/6] 48016 fix(workflows): keep comment avatars circular in workflow log --- frontend/src/public/components/UI/Avatar/Avatar.css | 6 ++++++ .../WorkflowLog/PopupCommentField/PopupCommentField.css | 2 ++ .../WorkflowLogTaskComment/WorkflowLogTaskComment.css | 1 + 3 files changed, 9 insertions(+) diff --git a/frontend/src/public/components/UI/Avatar/Avatar.css b/frontend/src/public/components/UI/Avatar/Avatar.css index 4db8aa938..6138a8550 100644 --- a/frontend/src/public/components/UI/Avatar/Avatar.css +++ b/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; diff --git a/frontend/src/public/components/Workflows/WorkflowLog/PopupCommentField/PopupCommentField.css b/frontend/src/public/components/Workflows/WorkflowLog/PopupCommentField/PopupCommentField.css index 164e7407a..bc32207a0 100644 --- a/frontend/src/public/components/Workflows/WorkflowLog/PopupCommentField/PopupCommentField.css +++ b/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; diff --git a/frontend/src/public/components/Workflows/WorkflowLog/WorkflowLogEvents/WorkflowLogTaskComment/WorkflowLogTaskComment.css b/frontend/src/public/components/Workflows/WorkflowLog/WorkflowLogEvents/WorkflowLogTaskComment/WorkflowLogTaskComment.css index 751543ea6..fda1c4141 100644 --- a/frontend/src/public/components/Workflows/WorkflowLog/WorkflowLogEvents/WorkflowLogTaskComment/WorkflowLogTaskComment.css +++ b/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;