Truncate comment user name when too long (#274)

front/src/modules/comments/components/comments/CommentHeader.tsx

@@ -30,6 +30,10 @@ const StyledName = styled.div`
   font-size: 13px;
   font-weight: 400;
   color: ${(props) => props.theme.text80};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 160px;
 `;
 
 const StyledDate = styled.div`

front/src/modules/comments/components/comments/__stories__/CommentChip.stories.tsx

@@ -7,7 +7,7 @@ import { CellCommentChip } from '../CellCommentChip';
 import { CommentChip } from '../CommentChip';
 
 const meta: Meta<typeof CellCommentChip> = {
-  title: 'Components/Comments/CellCommentChip',
+  title: 'Comments/CellCommentChip',
   component: CellCommentChip,
 };
 

front/src/modules/comments/components/comments/__stories__/CommentHeader.stories.tsx

@@ -9,7 +9,7 @@ import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 import { CommentHeader } from '../CommentHeader';
 
 const meta: Meta<typeof CommentHeader> = {
-  title: 'Components/Comments/CommentHeader',
+  title: 'Comments/CommentHeader',
   component: CommentHeader,
 };
 
@@ -28,6 +28,19 @@ const mockComment: Pick<CommentForDrawer, 'id' | 'author' | 'createdAt'> = {
   createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '',
 };
 
+const mockCommentWithLongName: Pick<
+  CommentForDrawer,
+  'id' | 'author' | 'createdAt'
+> = {
+  id: v4(),
+  author: {
+    id: v4(),
+    displayName: mockUser.displayName + ' with a very long suffix' ?? '',
+    avatarUrl: mockUser.avatarUrl,
+  },
+  createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '',
+};
+
 export const Default: Story = {
   render: getRenderWrapperForComponent(
     <CommentHeader
@@ -86,3 +99,18 @@ export const WithoutAvatar: Story = {
     />,
   ),
 };
+
+export const WithLongUserName: Story = {
+  render: getRenderWrapperForComponent(
+    <CommentHeader
+      comment={{
+        ...mockCommentWithLongName,
+        author: {
+          ...mockCommentWithLongName.author,
+          avatarUrl: '',
+        },
+        createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '',
+      }}
+    />,
+  ),
+};