diff --git a/src/features/BuyMatchPopup/components/PackagesList/styled.tsx b/src/features/BuyMatchPopup/components/PackagesList/styled.tsx index b23c4faa..e0b3f747 100644 --- a/src/features/BuyMatchPopup/components/PackagesList/styled.tsx +++ b/src/features/BuyMatchPopup/components/PackagesList/styled.tsx @@ -33,7 +33,7 @@ export const List = styled.ul` ${isMobileDevice ? css` padding: 0; - height: 176px; + height: 180px; margin-top: 19px; @media screen and (orientation: landscape){ margin-top: 10px; @@ -78,29 +78,29 @@ export const Item = styled.li.attrs(() => ({ @media (max-width: 750px) { height: 100%; } - ${isMobileDevice + + ${isMobileDevice ? css` padding: 5px 10px; - min-height: 52.29px; - height: 52.29px; - :not(:last-child) { - margin-bottom: 10px; - @media screen and (orientation: landscape){ - margin-bottom: 5.24px; - } - @media (max-width: 850px) and (orientation: landscape){ + @media (max-width: 750px) { min-height: 52.29px; - height: 52.29px; + height: auto; } + + :not(:last-child) { + margin-bottom: 10px; + + @media screen and (orientation: landscape) { + margin-bottom: 5.24px; + } } - ` - : ''}; + ` : ''}; - @media (max-width: 850px) and (orientation: landscape){ - min-height: 52.29px; - height: 52.29px; - } + @media (max-width: 850px) and (orientation: landscape){ + min-height: 52.29px; + height: auto; + } ` export const InfoWrapper = styled.div` @@ -213,6 +213,7 @@ export const ScAutoRenewal = styled(PriceDetails)` line-height: 21px; font-size: 12px; text-transform: none; + white-space: nowrap; margin: 0; color: ${({ theme: { colors } }) => colors.text70}; `