From 592284f43844a0e315188f70ac5783bb990ed182 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 1 Apr 2022 17:46:00 +0700
Subject: [PATCH] fixed mobile layout on boris stats

---
 src/components/boris/BorisGraphicStats/styles.module.scss  | 7 ++++---
 src/components/charts/StatsCard/styles.module.scss         | 6 ++++++
 .../charts/StatsCountdownCard/styles.module.scss           | 6 ++++--
 src/components/charts/StatsGraphCard/index.tsx             | 7 ++++++-
 src/components/charts/StatsGraphCard/styles.module.scss    | 5 ++++-
 5 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/boris/BorisGraphicStats/styles.module.scss b/src/components/boris/BorisGraphicStats/styles.module.scss
index e3762d93..6675ee26 100644
--- a/src/components/boris/BorisGraphicStats/styles.module.scss
+++ b/src/components/boris/BorisGraphicStats/styles.module.scss
@@ -5,8 +5,9 @@
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   grid-column-gap: $gap;
   grid-row-gap: $gap;
-}
+  grid-auto-rows: 140px;
 
-.card {
-  height: 150px;
+  @include tablet {
+    grid-auto-rows: 120px;
+  }
 }
diff --git a/src/components/charts/StatsCard/styles.module.scss b/src/components/charts/StatsCard/styles.module.scss
index 1c683aff..e5790bfc 100644
--- a/src/components/charts/StatsCard/styles.module.scss
+++ b/src/components/charts/StatsCard/styles.module.scss
@@ -10,6 +10,8 @@
   z-index: 1;
   position: relative;
   flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .background {
@@ -20,3 +22,7 @@
   position: absolute;
   z-index: 0;
 }
+
+.title {
+  flex: 0;
+}
diff --git a/src/components/charts/StatsCountdownCard/styles.module.scss b/src/components/charts/StatsCountdownCard/styles.module.scss
index 5164c50d..cd44239a 100644
--- a/src/components/charts/StatsCountdownCard/styles.module.scss
+++ b/src/components/charts/StatsCountdownCard/styles.module.scss
@@ -3,13 +3,11 @@
 .content {
   width: 100%;
   flex: 1;
-  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   font: $font_18_semibold;
   color: transparentize(white, 0.5);
-  padding-bottom: 10px;
 }
 
 span.val {
@@ -17,3 +15,7 @@ span.val {
   color: white;
   padding: 0 $gap * 0.5 0 $gap * 2;
 }
+
+.card {
+  height: 100%;
+}
diff --git a/src/components/charts/StatsGraphCard/index.tsx b/src/components/charts/StatsGraphCard/index.tsx
index e2bf4f20..6a727876 100644
--- a/src/components/charts/StatsGraphCard/index.tsx
+++ b/src/components/charts/StatsGraphCard/index.tsx
@@ -16,7 +16,12 @@ interface StatsGraphCardProps extends CardProps {
 }
 
 const StatsGraphCard: VFC<StatsGraphCardProps> = ({ total, title, data, left, right }) => (
-  <StatsCard title={title} total={total} background={<BasicCurveChart items={data} />}>
+  <StatsCard
+    title={title}
+    total={total}
+    background={<BasicCurveChart items={data} />}
+    className={styles.card}
+  >
     <div className={styles.content}>
       <span>{left}</span>
       <Filler />
diff --git a/src/components/charts/StatsGraphCard/styles.module.scss b/src/components/charts/StatsGraphCard/styles.module.scss
index 3874a51b..5ae52c03 100644
--- a/src/components/charts/StatsGraphCard/styles.module.scss
+++ b/src/components/charts/StatsGraphCard/styles.module.scss
@@ -5,7 +5,10 @@
   height: 100%;
   display: flex;
   align-items: flex-end;
-  padding-bottom: $gap;
   font: $font_12_medium;
   opacity: 0.2;
 }
+
+.card {
+  height: 100%;
+}