diff --git a/src/pages/StatsPage/components/StatsTokenSection.tsx b/src/pages/StatsPage/components/StatsTokenSection.tsx
index f21a350..3b5f83a 100644
--- a/src/pages/StatsPage/components/StatsTokenSection.tsx
+++ b/src/pages/StatsPage/components/StatsTokenSection.tsx
@@ -1,13 +1,22 @@
import { Card, Empty, Select, Space, Spin, Table, Tag } from 'antd';
import type { StatsPageLogic } from '../StatsPageLogic';
+import { useIsMobile } from '../../../hooks/useIsMobile';
export default function StatsTokenSection({ logic }: { logic: StatsPageLogic }) {
const { data, tokenData, tokenLoading } = logic;
+ const isMobile = useIsMobile();
if (!data) return null;
return (
- }>
+ }
+ >
+ {isMobile && (
+
+ )}
{tokenLoading ? (
) : !logic.tokenAgentId ? (
diff --git a/src/pages/StatsPage/styles/stats-page-h5.css b/src/pages/StatsPage/styles/stats-page-h5.css
index 7043800..24a65fc 100644
--- a/src/pages/StatsPage/styles/stats-page-h5.css
+++ b/src/pages/StatsPage/styles/stats-page-h5.css
@@ -72,11 +72,19 @@
}
.stats-page-h5 .points-integration-row,
-.stats-page-h5 .stats-page-token-cards-grid,
.stats-page-h5 .stats-page-token-charts-grid {
grid-template-columns: 1fr;
}
+.stats-page-h5 .stats-page-token-cards-grid {
+ grid-template-columns: 1fr 1fr;
+ gap: 0;
+}
+
+.stats-page-h5 .stats-page-token-value {
+ font-size: 20px;
+}
+
.stats-page-h5 .stats-page-cards-grid,
.stats-page-h5 .points-integration-section,
.stats-page-h5 .stats-page-chart-card,
@@ -90,15 +98,41 @@
padding-bottom: 0.25rem;
}
+.stats-page-h5 .stats-page-chart-container {
+ padding: 0;
+ height: 160px;
+ padding-bottom: 12px;
+}
+
.stats-page-h5 .stats-page-chart-bar-group {
min-width: 1.625rem;
}
-.stats-page-h5 .stats-token-controls {
- width: 100%;
+.stats-page-h5 .stats-page-chart-card .ant-card-head {
+ padding: 12px 16px;
}
-.stats-page-h5 .stats-token-agent-select,
-.stats-page-h5 .stats-token-small-select {
- width: 100%;
+.stats-page-h5 .stats-page-chart-card .ant-card-head-title {
+ font-size: 16px;
+}
+
+.stats-page-h5 .stats-token-controls {
+ width: 100%;
+ display: flex !important;
+ flex-wrap: wrap;
+ gap: 8px !important;
+}
+
+.stats-page-h5 .stats-token-agent-select {
+ flex: 0 0 100% !important;
+ width: 100% !important;
+}
+
+.stats-page-h5 .stats-token-small-select {
+ flex: 1 !important;
+ width: auto !important;
+}
+
+.stats-page-h5 .ant-card-body {
+ padding: 16px;
}
diff --git a/src/styles.css b/src/styles.css
index b5e80f8..8af9721 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2404,6 +2404,10 @@ span.mention {
border: 1px solid rgba(255,255,255,0.7);
}
+.stats-page-h5 .stats-page-token-card {
+ padding: 12px;
+}
+
.stats-page-token-label {
font-size: 12.5px;
color: var(--color-text-secondary);
@@ -2464,14 +2468,14 @@ span.mention {
.points-integration-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
- gap: 14px;
+ gap: 12px;
}
.points-integration-item {
- border-radius: 18px;
- padding: 16px 18px;
+ border-radius: 12px;
background: rgba(255,255,255,0.72);
- border: 1px solid rgba(255,255,255,0.7);
+ border: 1px solid rgba(227, 239, 255, 0.5);
+ padding: 8px;
}
.points-integration-label {
@@ -2484,7 +2488,7 @@ span.mention {
}
.points-integration-value {
- font-size: 26px;
+ font-size: 20px;
font-weight: 700;
color: var(--color-text);
}