From f7c6ee470e9dd61fb1ad3b342f904978af921ab8 Mon Sep 17 00:00:00 2001
From: Jordan Knott <jordan@jordanthedev.com>
Date: Fri, 11 Sep 2020 14:54:22 -0500
Subject: [PATCH] fix: task label margin issue with task title

---
 frontend/src/shared/components/Card/Styles.ts |  8 ++-
 frontend/src/shared/components/Card/index.tsx | 62 ++++++++++---------
 2 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/frontend/src/shared/components/Card/Styles.ts b/frontend/src/shared/components/Card/Styles.ts
index 38fc22c..cb0b937 100644
--- a/frontend/src/shared/components/Card/Styles.ts
+++ b/frontend/src/shared/components/Card/Styles.ts
@@ -147,6 +147,11 @@ export const ListCardLabelText = styled.span`
   line-height: 16px;
 `;
 
+export const ListCardLabelsWrapper = styled.div`
+  overflow: auto;
+  position: relative;
+`;
+
 export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
   ${props =>
     props.variant === 'small'
@@ -178,9 +183,6 @@ export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
 `;
 
 export const ListCardLabels = styled.div<{ toggleLabels: boolean; toggleDirection: 'expand' | 'shrink' }>`
-  overflow: auto;
-  position: relative;
-  display: inline-flex;
   &:hover {
     opacity: 0.8;
   }
diff --git a/frontend/src/shared/components/Card/index.tsx b/frontend/src/shared/components/Card/index.tsx
index 740712c..928f198 100644
--- a/frontend/src/shared/components/Card/index.tsx
+++ b/frontend/src/shared/components/Card/index.tsx
@@ -20,6 +20,7 @@ import {
   ListCardLabels,
   ListCardLabel,
   ListCardLabelText,
+  ListCardLabelsWrapper,
   ListCardOperation,
   CardTitle,
   CardMembers,
@@ -158,35 +159,38 @@ const Card = React.forwardRef(
             </ListCardOperation>
           )}
           <ListCardDetails complete={complete ?? false}>
-            <ListCardLabels
-              toggleLabels={toggleLabels}
-              toggleDirection={toggleDirection}
-              onClick={e => {
-                e.stopPropagation();
-                if (onCardLabelClick) {
-                  onCardLabelClick();
-                }
-              }}
-            >
-              {labels &&
-                labels
-                  .slice()
-                  .sort((a, b) => a.labelColor.position - b.labelColor.position)
-                  .map(label => (
-                    <ListCardLabel
-                      onAnimationEnd={() => {
-                        if (setToggleLabels) {
-                          setToggleLabels(false);
-                        }
-                      }}
-                      variant={labelVariant ?? 'large'}
-                      color={label.labelColor.colorHex}
-                      key={label.id}
-                    >
-                      <ListCardLabelText>{label.name}</ListCardLabelText>
-                    </ListCardLabel>
-                  ))}
-            </ListCardLabels>
+            {labels && labels.length !== 0 && (
+              <ListCardLabelsWrapper>
+                <ListCardLabels
+                  toggleLabels={toggleLabels}
+                  toggleDirection={toggleDirection}
+                  onClick={e => {
+                    e.stopPropagation();
+                    if (onCardLabelClick) {
+                      onCardLabelClick();
+                    }
+                  }}
+                >
+                  {labels
+                    .slice()
+                    .sort((a, b) => a.labelColor.position - b.labelColor.position)
+                    .map(label => (
+                      <ListCardLabel
+                        onAnimationEnd={() => {
+                          if (setToggleLabels) {
+                            setToggleLabels(false);
+                          }
+                        }}
+                        variant={labelVariant ?? 'large'}
+                        color={label.labelColor.colorHex}
+                        key={label.id}
+                      >
+                        <ListCardLabelText>{label.name}</ListCardLabelText>
+                      </ListCardLabel>
+                    ))}
+                </ListCardLabels>
+              </ListCardLabelsWrapper>
+            )}
             {editable ? (
               <EditorContent>
                 {complete && <CompleteIcon width={16} height={16} />}