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() ?? '',
+      }}
+    />,
+  ),
+};

front/src/modules/ui/components/board/__stories__/Board.stories.tsx

@@ -6,7 +6,7 @@ import { Board } from '../Board';
 import { initialBoard, items } from './mock-data';
 
 const meta: Meta<typeof Board> = {
-  title: 'Components/Board',
+  title: 'UI/Board/Board',
   component: Board,
 };
 

front/src/modules/ui/components/inputs/__stories__/AutosizeTextInput.stories.tsx

@@ -5,7 +5,7 @@ import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 import { AutosizeTextInput } from '../AutosizeTextInput';
 
 const meta: Meta<typeof AutosizeTextInput> = {
-  title: 'Components/Common/AutosizeTextInput',
+  title: 'UI/Inputs/AutosizeTextInput',
   component: AutosizeTextInput,
 };
 

front/src/modules/ui/components/table/table-header/__stories__/TableHeader.stories.tsx

@@ -12,7 +12,7 @@ import { availableSorts } from '../../../../../../pages/companies/companies-sort
 import { TableHeader } from '../TableHeader';
 
 const meta: Meta<typeof TableHeader> = {
-  title: 'Components/Table/TableHeader',
+  title: 'UI/Table/TableHeader',
   component: TableHeader,
 };
 

front/src/modules/ui/layout/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx

@@ -6,7 +6,7 @@ import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 import { RightDrawerTopBar } from '../RightDrawerTopBar';
 
 const meta: Meta<typeof RightDrawerTopBar> = {
-  title: 'Components/RightDrawer/RightDrawerTopBar',
+  title: 'UI/RightDrawer/RightDrawerTopBar',
   component: RightDrawerTopBar,
   argTypes: {
     title: {

front/src/modules/users/components/__stories__/UserAvatar.stories.tsx

@@ -5,7 +5,7 @@ import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 import { UserAvatar } from '../UserAvatar';
 
 const meta: Meta<typeof UserAvatar> = {
-  title: 'Components/User/UserAvatar',
+  title: 'Users/UserAvatar',
   component: UserAvatar,
 };