diff --git a/src/features/TournamentList/components/CollapseTournament/index.tsx b/src/features/TournamentList/components/CollapseTournament/index.tsx index abdd52b1..d6b8d406 100644 --- a/src/features/TournamentList/components/CollapseTournament/index.tsx +++ b/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 '../..' diff --git a/src/features/TournamentList/components/CollapseTournament/styled.tsx b/src/features/TournamentList/components/CollapseTournament/styled.tsx index a7558e4f..61b5dc1b 100644 --- a/src/features/TournamentList/components/CollapseTournament/styled.tsx +++ b/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, } diff --git a/src/features/TournamentSubtitle/styled.tsx b/src/features/TournamentSubtitle/styled.tsx index 277d4bcc..39574d1d 100644 --- a/src/features/TournamentSubtitle/styled.tsx +++ b/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;` : ''} } } `