diff --git a/src/features/PaymentPeriodTabs/index.tsx b/src/features/PaymentPeriodTabs/index.tsx index 37e5ece3..475d6076 100644 --- a/src/features/PaymentPeriodTabs/index.tsx +++ b/src/features/PaymentPeriodTabs/index.tsx @@ -1,6 +1,7 @@ import { useMemo } from 'react' import map from 'lodash/map' +import size from 'lodash/size' import styled, { css } from 'styled-components/macro' import { isMobileDevice } from 'config/userAgent' @@ -10,10 +11,15 @@ import { T9n } from 'features/T9n' import { getCorrectPaymentTabs } from './helpers' -const List = styled.ul` +type ListProps = { + countSubscriptions: number, +} +const List = styled.ul` display: flex; min-width: 395px; - justify-content: space-between; + justify-content: ${({ countSubscriptions }) => (countSubscriptions === 1 + ? 'center' + : 'space-between')}; ${isMobileDevice ? css` min-width: 90%; @@ -89,7 +95,7 @@ export const PaymentPeriodTabs = ({ ), [matchSubscriptions]) return ( - + {map(matchSubscriptionsWithValues, ({ tabLexic, type }) => (