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( )} - { - e.stopPropagation(); - if (onCardLabelClick) { - onCardLabelClick(); - } - }} - > - {labels && - labels - .slice() - .sort((a, b) => a.labelColor.position - b.labelColor.position) - .map(label => ( - { - if (setToggleLabels) { - setToggleLabels(false); - } - }} - variant={labelVariant ?? 'large'} - color={label.labelColor.colorHex} - key={label.id} - > - {label.name} - - ))} - + {labels && labels.length !== 0 && ( + + { + e.stopPropagation(); + if (onCardLabelClick) { + onCardLabelClick(); + } + }} + > + {labels + .slice() + .sort((a, b) => a.labelColor.position - b.labelColor.position) + .map(label => ( + { + if (setToggleLabels) { + setToggleLabels(false); + } + }} + variant={labelVariant ?? 'large'} + color={label.labelColor.colorHex} + key={label.id} + > + {label.name} + + ))} + + + )} {editable ? ( {complete && }