From 869dd9b0ba54823131196864d3ebe4a9cbf548e0 Mon Sep 17 00:00:00 2001
From: Nicholas Pettas <npettas@gmail.com>
Date: Mon, 20 May 2024 23:10:19 -0700
Subject: [PATCH] some mobile fixes for accounts page

---
 app/leaderboard/[slug]/AccountAssociations.tsx |  4 ++--
 app/leaderboard/[slug]/AccountCharts.tsx       |  5 +++--
 app/leaderboard/[slug]/AccountStats.tsx        | 12 ++++++------
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/app/leaderboard/[slug]/AccountAssociations.tsx b/app/leaderboard/[slug]/AccountAssociations.tsx
index e93cfc8..c7b4369 100644
--- a/app/leaderboard/[slug]/AccountAssociations.tsx
+++ b/app/leaderboard/[slug]/AccountAssociations.tsx
@@ -88,8 +88,8 @@ export function AccountAssociations({
     >
       <Loader isLoading={isAssociatedLoading} />
 
-      <div className={`card-body mb-10`}>
-        <div className="card-title capitalize">
+      <div className={`card-body mb-10 px-0 sm:px-6`}>
+        <div className="card-title capitalize px-4">
           Associated {associatedAccountType()} Accounts
         </div>
 
diff --git a/app/leaderboard/[slug]/AccountCharts.tsx b/app/leaderboard/[slug]/AccountCharts.tsx
index b96c7cf..9639a6f 100644
--- a/app/leaderboard/[slug]/AccountCharts.tsx
+++ b/app/leaderboard/[slug]/AccountCharts.tsx
@@ -157,8 +157,9 @@ export function AccountCharts({
     >
       <Loader isLoading={isChartsLoading} />
 
-      <div className={`card-body sm:py-6`}>
+      <div className={`card-body sm:py-6 px-3 sm:px-6`}>
         <div className="card-title">Real Time Mining Stats</div>
+
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
           <div className="h-[200px] sm:h-[240px]">
             <BarChart datasets={hashesDataset()} />
@@ -175,7 +176,7 @@ export function AccountCharts({
           )}
 
           <div
-            className={`h-[180px] sm:h-[240px] ${accountType() == AccountType.Ethereum && "col-span-2"}`}
+            className={`h-[180px] sm:h-[240px] ${accountType() == AccountType.Ethereum && "sm:col-span-2"}`}
           >
             <BarChart datasets={txsDataset()} />
           </div>
diff --git a/app/leaderboard/[slug]/AccountStats.tsx b/app/leaderboard/[slug]/AccountStats.tsx
index 85b61a1..bc01001 100644
--- a/app/leaderboard/[slug]/AccountStats.tsx
+++ b/app/leaderboard/[slug]/AccountStats.tsx
@@ -85,7 +85,7 @@ export function AccountStats({
     >
       <Loader isLoading={isLoading} />
 
-      <div className={`card-body`}>
+      <div className={`card-body px-4 sm:px-6`}>
         <div className="card-title flex mb-6 capitalize">
           <h1 className="text-xl sm:text-4xl mr-auto whitespace-nowrap">
             {accountType()} Account
@@ -115,22 +115,22 @@ export function AccountStats({
           )}
 
           {!fetchError && (
-            <div className="w-full grid grid-cols-2 md:grid-cols-none md:stats gap-1 text-center">
-              <div className="stat">
+            <div className={`w-full grid ${accountType() == AccountType.Solana ? 'grid-cols-2': 'grid-cols-3'}  md:grid-cols-none md:stats gap-0 sm:gap-1 text-center`}>
+              <div className="stat px-0 sm:px-4">
                 <div className="stat-title">Rank</div>
                 <div className="stat-value text-secondary text-lg sm:text-4xl">
                   {rankValue()}
                 </div>
               </div>
 
-              <div className="stat">
+              <div className="stat px-0 sm:px-4">
                 <div className="stat-title">Hashes</div>
                 <div className="stat-value text-secondary text-lg sm:text-4xl">
                   {hashesValue()}
                 </div>
               </div>
 
-              <div className="stat">
+              <div className="stat px-0 sm:px-4">
                 <div className="stat-title">Super Hashes</div>
                 <div className="stat-value text-secondary text-lg sm:text-4xl">
                   {superHashesValue()}
@@ -138,7 +138,7 @@ export function AccountStats({
               </div>
 
               {accountType() == AccountType.Solana ? (
-                <div className="stat">
+                <div className="stat px-0 sm:px-4">
                   <div className="stat-title">solXEN</div>
                   <div className="stat-value text-secondary text-lg sm:text-4xl">
                     {solXenValue()}