fix: task label margin issue with task title

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;
   }

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

@@ -20,6 +20,7 @@ import {
   ListCardLabels,
   ListCardLabel,
   ListCardLabelText,
+  ListCardLabelsWrapper,
   ListCardOperation,
   CardTitle,
   CardMembers,
@@ -158,6 +159,8 @@ const Card = React.forwardRef(
             </ListCardOperation>
           )}
           <ListCardDetails complete={complete ?? false}>
+            {labels && labels.length !== 0 && (
+              <ListCardLabelsWrapper>
                 <ListCardLabels
                   toggleLabels={toggleLabels}
                   toggleDirection={toggleDirection}
@@ -168,8 +171,7 @@ const Card = React.forwardRef(
                     }
                   }}
                 >
-              {labels &&
-                labels
+                  {labels
                     .slice()
                     .sort((a, b) => a.labelColor.position - b.labelColor.position)
                     .map(label => (
@@ -187,6 +189,8 @@ const Card = React.forwardRef(
                       </ListCardLabel>
                     ))}
                 </ListCardLabels>
+              </ListCardLabelsWrapper>
+            )}
             {editable ? (
               <EditorContent>
                 {complete && <CompleteIcon width={16} height={16} />}