diff --git a/frontend/src/component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell.tsx b/frontend/src/component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell.tsx index cce0a2b8a2..b1c0e3e6d5 100644 --- a/frontend/src/component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell.tsx +++ b/frontend/src/component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell.tsx @@ -157,10 +157,11 @@ const ArchivedFeatureName: FC<{ ); }; -const RestTags: FC<{ tags: ITag[]; onClick: (tag: string) => void }> = ({ - tags, - onClick, -}) => { +const RestTags: FC<{ + tags: ITag[]; + onClick: (tag: string) => void; + isTagTypeColorEnabled: boolean; +}> = ({ tags, onClick, isTagTypeColorEnabled }) => { return ( ( @@ -169,7 +170,11 @@ const RestTags: FC<{ tags: ITag[]; onClick: (tag: string) => void }> = ({ onClick={() => onClick(`${tag.type}:${tag.value}`)} key={`${tag.type}:${tag.value}`} > - {`${tag.type}:${tag.value}`} + {isTagTypeColorEnabled ? ( + + ) : ( + `${tag.type}:${tag.value}` + )} ))} > @@ -208,12 +213,26 @@ const Tags: FC<{ const isOverflowing = tagFullText.length > 30; if (isTagTypeColorEnabled) { + // Create a tag object with truncated display value but keeping original values + const displayTag = { + ...tag, + displayValue: isOverflowing + ? `${tag.value.substring(0, Math.max(0, 30 - tag.type.length - 1))}...` + : tag.value, + }; + const tagComponent = ( handleTagClick(tag)} sx={{ cursor: 'pointer' }} > - + ); @@ -253,7 +272,13 @@ const Tags: FC<{ {tag3 && renderTag(tag3)} 0} - show={} + show={ + + } /> );