style(#ott2777): fixed long tourn names word wrap

src/components/SportIcon/SportIcon.tsx

@@ -59,7 +59,7 @@ export const SportIcon = ({
         styles={{
           alignItems: 'center',
           display: 'flex',
-          height: '100%',
+          // height: '100%', // пока не удалять
           justifyContent: 'center',
         }}
       />

src/features/MatchCard/styled.tsx

@@ -44,6 +44,7 @@ export const CardWrapper = styled.div<CardProps>`
   background-color: #3F3F3F;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
   cursor: pointer;
+
   ${isMobileDevice
     ? css`
       width: 100%;
@@ -66,6 +67,7 @@ export const HoverFrame = styled.div`
     border: 2px solid #fff
   }
 `
+
 type TPreviewWrapper = {
   color?: string,
   isGradientPreview?: boolean,
@@ -79,6 +81,7 @@ export const PreviewWrapper = styled.div<TPreviewWrapper>`
   ${({ color, isGradientPreview }) => isGradientPreview
     && css`
     background: ${color};`}
+
   ${isMobileDevice
     ? css`
       width: 50%;
@@ -150,9 +153,7 @@ export const Info = styled.div<CardProps>`
   flex-direction: column;
   padding: ${({ isMatchPage }) => (isMatchPage ? '1.2rem 0.472rem 1.2rem 0.519rem' : '0.85rem 0.472rem 0 0.519rem')};
   color: #fff;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
+
   ${isMobileDevice
     ? css`
       position: absolute;
@@ -176,6 +177,7 @@ export const FavoriteSign = styled.span<FavoriteSignProps>`
   margin-top: 0.08rem;
   margin-left: ${({ marginLeft = 9 }) => marginLeft}px;
   background: url('/images/sportFavStar.png') no-repeat center / 100% 100%;
+
   ${isMobileDevice
     ? css`
       width: 10px;
@@ -192,6 +194,7 @@ const nameStyles = css`
 
 export const Teams = styled.div<CardProps>`
   margin-bottom: ${({ isMatchPage }) => (isMatchPage ? '0' : '0.567rem')};
+
   ${isMobileDevice
     ? css`
       margin-bottom: 15px;
@@ -207,6 +210,7 @@ export const Team = styled.span`
   font-size: 0.85rem;
   line-height: 1.14rem;
   color: #fff;
+
   ${isMobileDevice
     ? css`
       font-size: 14px;
@@ -241,8 +245,8 @@ export const TeamLogo = styled(ProfileLogo)`
 
   :last-child {
     margin-left: 0.8rem;
-
   }
+  
   ${isMobileDevice
     ? css`
       width: 30%;

src/features/TournamentSubtitle/styled.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
 
@@ -6,7 +6,6 @@ import { ProfileLink } from 'features/ProfileLink'
 
 export const Wrapper = styled.div`
   display: flex;
-  align-items: center;
 `
 
 export const CountryFlag = styled.img`
@@ -30,6 +29,7 @@ export const NameSignWrapper = styled.div`
   max-width: 90%;
   align-items: center;
 `
+
 type StyledLinkProps = {
   isLeftSide?: boolean,
   isMatchPage?: boolean,
@@ -38,7 +38,6 @@ type StyledLinkProps = {
 export const StyledLink = styled(ProfileLink)<StyledLinkProps>`
   color: rgba(255, 255, 255, 0.7);
   font-size: 0.567rem;
-  line-height: 0.95rem;
   margin-left: ${({ isLeftSide }) => (isLeftSide ? '0px' : '0.567rem')};
 
   &:hover {