From 3e90223c5d8f8244323468f6cc2204daccd71d85 Mon Sep 17 00:00:00 2001
From: Sergiu <46888793+Serj10GR@users.noreply.github.com>
Date: Wed, 12 Aug 2020 11:26:23 +0300
Subject: [PATCH] Ott 275 scroll fix (#75)

---
 .../MatchesSlider/components/CardSoon/index.tsx      |  2 +-
 src/features/MatchesSlider/components/styled.tsx     | 12 ++++++++----
 src/features/MatchesSlider/styled.tsx                |  1 +
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/features/MatchesSlider/components/CardSoon/index.tsx b/src/features/MatchesSlider/components/CardSoon/index.tsx
index fa56be03..8304c9b8 100644
--- a/src/features/MatchesSlider/components/CardSoon/index.tsx
+++ b/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`
diff --git a/src/features/MatchesSlider/components/styled.tsx b/src/features/MatchesSlider/components/styled.tsx
index 1a97d4f3..51284ce5 100644
--- a/src/features/MatchesSlider/components/styled.tsx
+++ b/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``
diff --git a/src/features/MatchesSlider/styled.tsx b/src/features/MatchesSlider/styled.tsx
index ee1ce320..baa118be 100644
--- a/src/features/MatchesSlider/styled.tsx
+++ b/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;