fix(ott-2838): fix styles

src/features/TournamentList/components/CollapseTournament/index.tsx

@@ -4,11 +4,7 @@ import { T9n } from 'features/T9n'
 import { Icon } from 'features/Icon'
 import { Name } from 'features/Name'
 import { useHeaderFiltersStore } from 'features/HeaderFilters'
-import {
-  CountryWrapper,
-  SportWrapper,
-  Tooltip,
-} from 'features/TournamentSubtitle/styled'
+import { CountryWrapper, SportWrapper } from 'features/TournamentSubtitle/styled'
 
 import { SportIcon } from 'components/SportIcon/SportIcon'
 
@@ -27,6 +23,7 @@ import {
   CountryFlag,
   SecondaryInfo,
   HoverFrame,
+  Tooltip,
 } from './styled'
 
 import { TournamentProps } from '../..'

src/features/TournamentList/components/CollapseTournament/styled.tsx

@@ -5,6 +5,7 @@ import { isMobileDevice } from 'config/userAgent'
 
 import { Name } from 'features/Name'
 import { ProfileLogo } from 'features/ProfileLogo'
+import { Tooltip as TooltipBase } from 'features/TournamentSubtitle/styled'
 
 export const CardWrapperOuter = styled.li.attrs({
   tabIndex: 0,
@@ -131,8 +132,8 @@ export const Info = styled.div`
   padding: 0 0.472rem 0 0.519rem;
   color: #fff;
   text-overflow: ellipsis;
-  overflow: hidden;
   white-space: nowrap;
+
   ${isMobileDevice
     ? css`
       position: absolute;
@@ -202,6 +203,13 @@ export const TournamentLogo = styled(ProfileLogo)`
   max-height: 100%;
 `
 
+export const Tooltip = styled(TooltipBase)`
+  transform: translateX(-50%);
+  left: 50%;
+  bottom: 100%;
+  top: auto;
+`
+
 type FavoriteSignProps = {
   color?: string,
 }

src/features/TournamentSubtitle/styled.tsx

@@ -19,31 +19,31 @@ export const SubtitleMain = styled.div`
 
 export const Tooltip = styled.div`
   position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  left: 100%;
+  top: 110%;
+  left: 15px;
   padding: 0 6px;
-  line-height: 1.0625rem;
+  line-height: 14px;
   background-color: #fff;
   border-radius: 6px;
   color: #000;
   font-weight: 400;
-  font-size: 0.6875rem;
+  font-size: 11px;
   overflow: hidden;
   white-space: nowrap;
-  margin-left: 5px;
   z-index: 3;
   display: none;
 `
 
 export const SportWrapper = styled.div`
   display: flex;
+  align-items: center;
+  height: 0.75rem;
   z-index: 3;
   position: relative;
 
   &:hover {
     ${Tooltip} {
-      display: block;
+      ${!isMobileDevice ? css`display: block;` : ''}
     }
   }
 `