From 2fc0d7b2a7eb77ca0e193362b6c257623925fb8d Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sat, 9 Aug 2025 10:14:35 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1=20feat(ui):=20enhance=20mobile=20p?=
 =?UTF-8?q?agination=20in=20PricingCardView?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Integrate `useIsMobile` hook to detect mobile devices.
* Pagination now automatically:
  * sets `size="small"` on mobile screens
  * enables `showQuickJumper` for quicker navigation on small screens
* Desktop behaviour remains unchanged.
---
 web/src/components/layout/HeaderBar.js                        | 2 +-
 .../table/model-pricing/view/card/PricingCardView.jsx         | 4 ++++
 web/src/index.css                                             | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/web/src/components/layout/HeaderBar.js b/web/src/components/layout/HeaderBar.js
index 13cbf092..8f4d1990 100644
--- a/web/src/components/layout/HeaderBar.js
+++ b/web/src/components/layout/HeaderBar.js
@@ -458,7 +458,7 @@ const HeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
   };
 
   return (
-    <header className="text-semi-color-text-0 sticky top-0 z-50 transition-colors duration-300 bg-white/75 dark:bg-zinc-900/75 backdrop-blur-lg" style={{ borderBottom: '1px solid var(--semi-color-border)' }}>
+    <header className="text-semi-color-text-0 sticky top-0 z-50 transition-colors duration-300 bg-white/75 dark:bg-zinc-900/75 backdrop-blur-lg">
       <NoticeModal
         visible={noticeVisible}
         onClose={handleNoticeClose}
diff --git a/web/src/components/table/model-pricing/view/card/PricingCardView.jsx b/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
index 83814b56..516d43e5 100644
--- a/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
+++ b/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
@@ -25,6 +25,7 @@ import { stringToColor, calculateModelPrice, formatPriceInfo, getLobeHubIcon } f
 import PricingCardSkeleton from './PricingCardSkeleton';
 import { useMinimumLoadingTime } from '../../../../../hooks/common/useMinimumLoadingTime';
 import { renderLimitedItems } from '../../../../common/ui/RenderUtils';
+import { useIsMobile } from '../../../../../hooks/common/useIsMobile';
 
 const CARD_STYLES = {
   container: "w-12 h-12 rounded-2xl flex items-center justify-center relative shadow-md",
@@ -59,6 +60,7 @@ const PricingCardView = ({
   const startIndex = (currentPage - 1) * pageSize;
   const paginatedModels = filteredModels.slice(startIndex, startIndex + pageSize);
   const getModelKey = (model) => model.key ?? model.model_name ?? model.id;
+  const isMobile = useIsMobile();
 
   const handleCheckboxChange = (model, checked) => {
     if (!setSelectedRowKeys) return;
@@ -311,6 +313,8 @@ const PricingCardView = ({
             total={filteredModels.length}
             showSizeChanger={true}
             pageSizeOptions={[10, 20, 50, 100]}
+            size={isMobile ? 'small' : 'default'}
+            showQuickJumper={isMobile}
             onPageChange={(page) => setCurrentPage(page)}
             onPageSizeChange={(size) => {
               setPageSize(size);
diff --git a/web/src/index.css b/web/src/index.css
index 98d96679..b553db94 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -655,7 +655,7 @@ html:not(.dark) .blur-ball-teal {
 }
 
 .pricing-search-header {
-  padding: 16px 24px;
+  padding: 1rem;
   border-bottom: 1px solid var(--semi-color-border);
   background-color: var(--semi-color-bg-0);
   flex-shrink: 0;