From 43c6bbb3adad84743e29fe4f35209c622c3de71b Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sat, 23 Aug 2025 03:36:18 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1=20fix(ui/topup):=20make=20stats=20?=
 =?UTF-8?q?numbers=20responsive=20on=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reduce KPI font size on small screens to prevent overlapping of large
numbers while preserving the desktop layout.

Changes:
- InvitationCard.jsx: use `text-base sm:text-2xl` for
  pending earnings, total earnings, and invite count.
- RechargeCard.jsx: use `text-base sm:text-2xl` for
  current balance, historical usage, and request count.

Impact:
- Visual-only; no behavioral changes.
- Desktop/tablet unchanged.
- Lint passes.

Files:
- web/src/components/topup/InvitationCard.jsx
- web/src/components/topup/RechargeCard.jsx
---
 web/src/components/topup/InvitationCard.jsx | 6 +++---
 web/src/components/topup/RechargeCard.jsx   | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/components/topup/InvitationCard.jsx b/web/src/components/topup/InvitationCard.jsx
index 8b89967b..4af0dfe1 100644
--- a/web/src/components/topup/InvitationCard.jsx
+++ b/web/src/components/topup/InvitationCard.jsx
@@ -89,7 +89,7 @@ const InvitationCard = ({
                 <div className='grid grid-cols-3 gap-6 mt-4'>
                   {/* 待使用收益 */}
                   <div className='text-center'>
-                    <div className='text-2xl font-bold mb-2' style={{ color: 'white' }}>
+                    <div className='text-base sm:text-2xl font-bold mb-2' style={{ color: 'white' }}>
                       {renderQuota(userState?.user?.aff_quota || 0)}
                     </div>
                     <div className='flex items-center justify-center text-sm'>
@@ -100,7 +100,7 @@ const InvitationCard = ({
 
                   {/* 总收益 */}
                   <div className='text-center'>
-                    <div className='text-2xl font-bold mb-2' style={{ color: 'white' }}>
+                    <div className='text-base sm:text-2xl font-bold mb-2' style={{ color: 'white' }}>
                       {renderQuota(userState?.user?.aff_history_quota || 0)}
                     </div>
                     <div className='flex items-center justify-center text-sm'>
@@ -111,7 +111,7 @@ const InvitationCard = ({
 
                   {/* 邀请人数 */}
                   <div className='text-center'>
-                    <div className='text-2xl font-bold mb-2' style={{ color: 'white' }}>
+                    <div className='text-base sm:text-2xl font-bold mb-2' style={{ color: 'white' }}>
                       {userState?.user?.aff_count || 0}
                     </div>
                     <div className='flex items-center justify-center text-sm'>
diff --git a/web/src/components/topup/RechargeCard.jsx b/web/src/components/topup/RechargeCard.jsx
index 6d96217a..9150c8c3 100644
--- a/web/src/components/topup/RechargeCard.jsx
+++ b/web/src/components/topup/RechargeCard.jsx
@@ -109,7 +109,7 @@ const RechargeCard = ({
                 <div className='grid grid-cols-3 gap-6 mt-4'>
                   {/* 当前余额 */}
                   <div className='text-center'>
-                    <div className='text-2xl font-bold mb-2' style={{ color: 'white' }}>
+                    <div className='text-base sm:text-2xl font-bold mb-2' style={{ color: 'white' }}>
                       {renderQuota(userState?.user?.quota)}
                     </div>
                     <div className='flex items-center justify-center text-sm'>
@@ -120,7 +120,7 @@ const RechargeCard = ({
 
                   {/* 历史消耗 */}
                   <div className='text-center'>
-                    <div className='text-2xl font-bold mb-2' style={{ color: 'white' }}>
+                    <div className='text-base sm:text-2xl font-bold mb-2' style={{ color: 'white' }}>
                       {renderQuota(userState?.user?.used_quota)}
                     </div>
                     <div className='flex items-center justify-center text-sm'>
@@ -131,7 +131,7 @@ const RechargeCard = ({
 
                   {/* 请求次数 */}
                   <div className='text-center'>
-                    <div className='text-2xl font-bold mb-2' style={{ color: 'white' }}>
+                    <div className='text-base sm:text-2xl font-bold mb-2' style={{ color: 'white' }}>
                       {userState?.user?.request_count || 0}
                     </div>
                     <div className='flex items-center justify-center text-sm'>