some mobile fixes for accounts page

FairCrypto · May 21, 2024 · 869dd9b · 869dd9b
1 parent f52b270
commit 869dd9b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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,30 +115,30 @@ 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()}
                 </div>
               </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()}