feat(list-item): add ellipsis to list title

Author: cannarocks

src/pages/Campaign/widgets/List/ListItem.tsx

@@ -1,18 +1,24 @@
-import { SM, Progress, MD, Span } from '@appquality/unguess-design-system';
+import {
+  SM,
+  Progress,
+  MD,
+  Span,
+  Ellipsis,
+} from '@appquality/unguess-design-system';
 import { theme as globalTheme } from 'src/app/theme';
 import styled from 'styled-components';
 import { ListItemProps } from './type';
 
 const ListItemTitle = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 9fr 1fr;
   padding-top: ${({ theme }) => theme.space.xs};
   padding-bottom: ${({ theme }) => theme.space.xxs};
 `;
 
 const ListItemWrapper = styled.div`
   margin-top: ${(p) => p.theme.space.xxs};
+  display: block;
 `;
 
 export const ListItem = ({
@@ -22,10 +28,14 @@ export const ListItem = ({
 }: ListItemProps) => (
   <ListItemWrapper>
     <ListItemTitle>
-      <MD isBold style={{ color: globalTheme.palette.blue[600] }}>
-        {children}
+      <MD
+        isBold
+        style={{ color: globalTheme.palette.blue[600], display: 'contents' }}
+      >
+        <Ellipsis style={{ width: '97%' }}>{children}</Ellipsis>
       </MD>
-      <SM style={{ color: globalTheme.palette.grey[600] }}>
+
+      <SM style={{ color: globalTheme.palette.grey[600], justifySelf: 'end' }}>
         <Span isBold style={{ color: globalTheme.palette.grey[700] }}>
           {numerator}
         </Span>