diff --git a/frontend/src/component/feature/FeatureView/Collaborators.tsx b/frontend/src/component/feature/FeatureView/Collaborators.tsx index 95cc6e92d3..279e11494a 100644 --- a/frontend/src/component/feature/FeatureView/Collaborators.tsx +++ b/frontend/src/component/feature/FeatureView/Collaborators.tsx @@ -11,56 +11,48 @@ const StyledAvatar = styled(UserAvatar)(({ theme }) => ({ height: theme.spacing(3), })); -const LastModifiedByContainer = styled('div')(({ theme }) => ({ - display: 'grid', - gridTemplateAreas: ` - 'description description' - 'avatar link' - `, - rowGap: theme.spacing(0.5), - columnGap: theme.spacing(1), - alignItems: 'center', - height: 'min-content', -})); - -const GridDescription = styled('span')({ gridArea: 'description' }); -const GridTooltip = styled(HtmlTooltip)({ gridArea: 'avatar' }); -const GridLink = styled(Link)({ gridArea: 'link' }); - -const LastModifiedBy: FC = ({ id, name, imageUrl }) => { - return ( - - Last modified by - - - - - - view change - - ); -}; - -const CollaboratorListContainer = styled('div')(({ theme }) => ({ +const SectionContainer = styled('div')(({ theme }) => ({ display: 'flex', - flexFlow: 'column', + flexFlow: 'row', gap: theme.spacing(0.5), alignItems: 'flex-start', height: 'min-content', })); +const LastModifiedByAvatarAndLink = styled('div')(({ theme }) => ({ + display: 'flex', + flexFlow: 'column', + gap: theme.spacing(1), +})); + +const LastModifiedBy: FC = ({ id, name, imageUrl }) => { + return ( + + Last modified by + + + + + + + view change + + + ); +}; + const CollaboratorList: FC<{ collaborators: Collaborator[] }> = ({ collaborators, }) => { return ( - + Collaborators - + ); };