From 35ac12b7b2a2815c56afa5c78f596c25d7e8a043 Mon Sep 17 00:00:00 2001
From: Jordan Knott <jordan@jordanthedev.com>
Date: Wed, 6 Jan 2021 17:00:10 -0600
Subject: [PATCH] fix(Lists): fix flickering when list was a certain size

---
 frontend/src/shared/components/Card/Styles.ts | 12 +++++++-----
 frontend/src/shared/components/Card/index.tsx |  3 ++-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/shared/components/Card/Styles.ts b/frontend/src/shared/components/Card/Styles.ts
index 41f3b04..fd43ddf 100644
--- a/frontend/src/shared/components/Card/Styles.ts
+++ b/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`
diff --git a/frontend/src/shared/components/Card/index.tsx b/frontend/src/shared/components/Card/index.tsx
index 8fac619..4f3f055 100644
--- a/frontend/src/shared/components/Card/index.tsx
+++ b/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>