fix(Lists): fix flickering when list was a certain size

frontend/src/shared/components/Card/Styles.ts

@@ -227,18 +227,19 @@ export const ListCardOperation = styled.span`
   }
 `;
 
-export const CardTitle = styled.span`
+export const CardTitle = styled.div`
   clear: both;
   margin: 0 0 4px;
   overflow: hidden;
   text-decoration: none;
+  color: ${props => props.theme.colors.text.primary};
+  display: block;
+  align-items: center;
+`;
+export const CardTitleText = styled.span`
   word-wrap: break-word;
   line-height: 18px;
   font-size: 14px;
-  color: ${props => props.theme.colors.text.primary};
-
-  display: flex;
-  align-items: center;
 `;
 
 export const CardMembers = styled.div`
@@ -251,6 +252,7 @@ export const CompleteIcon = styled(CheckCircle)`
   fill: ${props => props.theme.colors.success};
   margin-right: 4px;
   flex-shrink: 0;
+  margin-bottom: -2px;
 `;
 
 export const EditorContent = styled.div`

frontend/src/shared/components/Card/index.tsx

@@ -22,6 +22,7 @@ import {
   ListCardOperation,
   CardTitle,
   CardMembers,
+  CardTitleText,
 } from './Styles';
 
 type DueDate = {
@@ -210,7 +211,7 @@ const Card = React.forwardRef(
             ) : (
               <CardTitle>
                 {complete && <CompleteIcon width={16} height={16} />}
-                {`${title}${position ? ` - ${position}` : ''}`}
+                <CardTitleText>{`${title}${position ? ` - ${position}` : ''}`}</CardTitleText>
               </CardTitle>
             )}
             <ListCardBadges>