Ott 1992 subscription position

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<ListProps>`
   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 (
-    <List className={className}>
+    <List className={className} countSubscriptions={size(matchSubscriptionsWithValues)}>
       {map(matchSubscriptionsWithValues, ({ tabLexic, type }) => (
         <Item
           key={type}