From c3d9a1bff47f72ade7554308738fa211da3ef3e1 Mon Sep 17 00:00:00 2001
From: TonyPepe <tonybear55665566@gmail.com>
Date: Tue, 14 Jul 2026 15:39:20 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=20=E5=B0=8F=E8=9E=A2?=
 =?UTF-8?q?=E5=B9=95=E7=9B=B8=E7=B0=BF=E5=88=86=E9=A0=81=E8=B7=91=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/pagination.css    | 6 +++++-
 src/pages/gallery_list.js | 4 ++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/css/pagination.css b/src/css/pagination.css
index 0698fd7..6d2cdc4 100644
--- a/src/css/pagination.css
+++ b/src/css/pagination.css
@@ -35,7 +35,7 @@
 }
 
 .rc-pagination {
-  @apply flex flex-row flex-wrap justify-center items-center gap-2 text-lg;
+  @apply flex flex-row flex-nowrap justify-center items-center gap-2 text-lg;
 }
 
 .rc-pagination > li {
@@ -50,6 +50,10 @@
   @apply cursor-not-allowed opacity-35;
 }
 
+.rc-pagination-simple > .rc-pagination-options {
+  @apply hidden;
+}
+
 .rc-pagination a,
 .rc-pagination button {
   @apply flex min-h-11 min-w-11 items-center justify-center rounded-full focus:outline-none;
diff --git a/src/pages/gallery_list.js b/src/pages/gallery_list.js
index d6d157c..4dc6005 100644
--- a/src/pages/gallery_list.js
+++ b/src/pages/gallery_list.js
@@ -10,6 +10,7 @@ import chevronLeft from "@iconify/icons-akar-icons/chevron-left";
 import chevronRight from "@iconify/icons-akar-icons/chevron-right";
 import moreHorizontal from "@iconify/icons-akar-icons/more-horizontal";
 import Pagination from "rc-pagination";
+import { useMediaQuery } from "react-responsive";
 import "../css/pagination.css";
 import ImageWithPlaceholder from "../components/image-with-placeholder";
 import useGoogleAdsConversion from "../hooks/useGoogleAdsConversion";
@@ -17,6 +18,7 @@ import useGoogleAdsConversion from "../hooks/useGoogleAdsConversion";
 const GalleryList = ({ data }) => {
   const [currentPage, setCurrentPage] = useState(1);
   const [searchQuery, setSearchQuery] = useState("");
+  const isSmallDevice = useMediaQuery({ maxWidth: 639 });
 
   // Google Ads 轉換追蹤
   useGoogleAdsConversion();
@@ -107,6 +109,7 @@ const GalleryList = ({ data }) => {
                 total={itemCount}
                 pageSize={perPage}
                 showTitle={false}
+                simple={isSmallDevice ? { readOnly: true } : false}
                 prevIcon={
                   <Icon icon={chevronLeft} width="24" aria-hidden="true" />
                 }
@@ -148,6 +151,7 @@ const GalleryList = ({ data }) => {
                 total={itemCount}
                 pageSize={perPage}
                 showTitle={false}
+                simple={isSmallDevice ? { readOnly: true } : false}
                 prevIcon={
                   <Icon icon={chevronLeft} width="24" aria-hidden="true" />
                 }