From 394730327bf2fddb3f4bf44b5cdd33c3fe1ecfc2 Mon Sep 17 00:00:00 2001
From: shinya <kobayashi_shinya@outlook.com>
Date: Fri, 15 Aug 2025 00:57:23 +0800
Subject: [PATCH] feat: adjust search result filter mobile style

---
 src/app/search/page.tsx               |  2 +-
 src/components/SearchResultFilter.tsx | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index 0f2fb61..7676c62 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -481,7 +481,7 @@ function SearchPageClient() {
                 </div>
                 {/* 聚合开关 */}
                 <label className='flex items-center gap-2 cursor-pointer select-none shrink-0'>
-                  <span className='text-sm text-gray-700 dark:text-gray-300'>聚合</span>
+                  <span className='text-xs sm:text-sm text-gray-700 dark:text-gray-300'>聚合</span>
                   <div className='relative'>
                     <input
                       type='checkbox'
diff --git a/src/components/SearchResultFilter.tsx b/src/components/SearchResultFilter.tsx
index 93cfa2c..10e25f3 100644
--- a/src/components/SearchResultFilter.tsx
+++ b/src/components/SearchResultFilter.tsx
@@ -51,7 +51,9 @@ const SearchResultFilter: React.FC<SearchResultFilterProps> = ({ categories, val
       const isMobile = viewportWidth < 768;
 
       let x = rect.left;
-      let dropdownWidth = Math.max(rect.width, 240);
+      // 为标题筛选设置更大的最小宽度，其他保持原来的最小宽度
+      const minWidth = categoryKey === 'title' ? 400 : 240;
+      let dropdownWidth = Math.max(rect.width, minWidth);
       let useFixedWidth = false;
 
       if (isMobile) {
@@ -191,16 +193,16 @@ const SearchResultFilter: React.FC<SearchResultFilterProps> = ({ categories, val
       {activeCategory && createPortal(
         <div
           ref={dropdownRef}
-          className='fixed z-[9999] bg-white/95 dark:bg-gray-800/95 rounded-xl border border-gray-200/50 dark:border-gray-700/50 backdrop-blur-sm'
+          className='fixed z-[9999] bg-white/95 dark:bg-gray-800/95 rounded-xl border border-gray-200/50 dark:border-gray-700/50 backdrop-blur-sm max-h-[50vh] flex flex-col'
           style={{
             left: `${dropdownPosition.x}px`,
             top: `${dropdownPosition.y}px`,
-            ...(typeof window !== 'undefined' && window.innerWidth < 768 ? { width: `${dropdownPosition.width}px` } : { minWidth: `${Math.max(dropdownPosition.width, 240)}px` }),
+            ...(typeof window !== 'undefined' && window.innerWidth < 768 ? { width: `${dropdownPosition.width}px` } : { minWidth: `${Math.max(dropdownPosition.width, activeCategory === 'title' ? 400 : 240)}px` }),
             maxWidth: '600px',
             position: 'fixed',
           }}
         >
-          <div className='p-2 sm:p-4'>
+          <div className='p-2 sm:p-4 overflow-y-auto flex-1 min-h-0'>
             <div className='grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-1 sm:gap-2'>
               {categories.find((cat) => cat.key === activeCategory)?.options.map((option) => (
                 <button