Ott 275 scroll fix (#75)

src/features/MatchesSlider/components/CardSoon/index.tsx

@@ -26,7 +26,7 @@ const MatchStatus = styled(CommonMatchStatus)`
 `
 
 const CardWrapper = styled(CommonCardWrapper)`
-  cursor: default;
+  cursor: pointer;
 `
 
 const TeamLogos = styled.div`

src/features/MatchesSlider/components/styled.tsx

@@ -11,8 +11,7 @@ export const CardWrapper = styled.li.attrs({
   flex: 0 0 auto;
   width: ${MATCH_CARD_WIDTH}px;
   margin-right: ${MATCH_CARD_GAP}px;
-  padding-bottom: 30px;
-  height: 288px;
+  padding-bottom: 22px;
   border-radius: 2px;
   background-color: #3F3F3F;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
@@ -38,7 +37,7 @@ export const MatchStatus = styled.div`
   height: 24px;
   border-radius: 2px;
   padding: 5px 5px;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 0.1em;
@@ -48,6 +47,9 @@ export const MatchStatus = styled.div`
 export const Info = styled.div`
   padding: 33px 24px 0;
   color: #fff;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 `
 
 export const TournamentName = styled.span`
@@ -71,7 +73,9 @@ export const Team = styled.div`
 
 export const TeamName = styled.span`
   max-width: 90%;
-  word-break: break-word;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 `
 
 export const Score = styled.span``

src/features/MatchesSlider/styled.tsx

@@ -8,6 +8,7 @@ export const Wrapper = styled.div`
 export const Slides = styled.ul`
   display: flex;
   scroll-behavior: smooth;
+  overflow-x: auto;
 
   &::-webkit-scrollbar {
     display: none;