fixed mobile layout on boris stats

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;
+  }
 }

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;
+}

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%;
+}

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 />

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%;
+}