From a15790c9aac071c77d033bfb5eefd821d8e5c313 Mon Sep 17 00:00:00 2001
From: Josh <josh.hundley@gmail.com>
Date: Thu, 25 Mar 2021 11:52:28 -0700
Subject: [PATCH] fix: make new stats card look okay on mobile (#16132)

---
 explorer/src/pages/ClusterStatsPage.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/explorer/src/pages/ClusterStatsPage.tsx b/explorer/src/pages/ClusterStatsPage.tsx
index 5b0b8b8f19..c87baa4ebf 100644
--- a/explorer/src/pages/ClusterStatsPage.tsx
+++ b/explorer/src/pages/ClusterStatsPage.tsx
@@ -127,7 +127,7 @@ function StakingComponent() {
   return (
     <div className="card staking-card">
       <div className="card-body">
-        <div className="d-flex">
+        <div className="d-flex flex-sm-row flex-column">
           <div className="p-2 flex-fill">
             <h4>Circulating Supply</h4>
             <h1>
@@ -138,6 +138,7 @@ function StakingComponent() {
               <em>{circulatingPercentage}%</em> is circulating
             </h5>
           </div>
+          <hr className="hidden-xs-up" />
           <div className="p-2 flex-fill">
             <h4>Active Stake</h4>
             <h1>
@@ -150,6 +151,7 @@ function StakingComponent() {
               </h5>
             )}
           </div>
+          <hr className="hidden-xs-up" />
           {solanaInfo && (
             <div className="p-2 flex-fill">
               <h4>Price</h4>