優化手機介面呈現方式

app/wishes/page.tsx

@@ -191,7 +191,7 @@ export default function WishesPage() {
   
   // 分頁相關狀態
   const [currentPage, setCurrentPage] = useState(1)
-  const [itemsPerPage] = useState(5)
+  const [itemsPerPage] = useState(3)
   const [paginatedWishes, setPaginatedWishes] = useState<Wish[]>([])
   const [totalPages, setTotalPages] = useState(0)
 

components/wish-card.tsx

@@ -279,20 +279,31 @@ export default function WishCard({ wish }: WishCardProps) {
         <div className="relative overflow-hidden rounded-lg md:rounded-xl bg-gradient-to-r from-pink-800/30 to-rose-800/30 border border-pink-600/40 p-3 md:p-4 backdrop-blur-sm transition-all duration-300">
           <div className="absolute inset-0 bg-gradient-to-r from-pink-500/10 to-rose-500/10"></div>
 
-          <div className="relative flex items-center justify-between">
+          {/* 手機端優化：改為上下布局避免擠壓 */}
-            <div className="flex items-center gap-3">
+          <div className="relative">
-              <div className="flex items-center gap-2">
+            {/* 第一行：支持數量和愛心顯示 */}
-                <Users className="w-4 h-4 text-pink-300" />
+            <div className="flex items-center justify-between mb-3">
-                <span className="text-sm md:text-base text-pink-200 font-medium">
+              <div className="flex items-center gap-2 flex-1 min-w-0">
+                <Users className="w-4 h-4 text-pink-300 flex-shrink-0" />
+                <span className="text-sm md:text-base text-pink-200 font-medium truncate">
+                  {likeCount > 0 ? (
+                    <span className="sm:hidden">{likeCount} 人也遇到</span>
+                  ) : (
+                    <span className="sm:hidden">成為第一個支持者</span>
+                  )}
+                  <span className="hidden sm:inline">
                     {likeCount > 0 ? `${likeCount} 人也遇到相同問題` : "成為第一個表達支持的人"}
                   </span>
+                </span>
               </div>
+              
+              {/* 愛心動畫區域 - 手機端縮小 */}
               {likeCount > 0 && (
-                <div className="flex items-center gap-1">
+                <div className="flex items-center gap-0.5 sm:gap-1 flex-shrink-0">
                   {[...Array(Math.min(likeCount, 5))].map((_, i) => (
                     <Heart
                       key={i}
-                      className="w-3 h-3 text-pink-400 animate-pulse"
+                      className="w-2.5 h-2.5 sm:w-3 sm:h-3 text-pink-400 animate-pulse"
                       fill="currentColor"
                       style={{ animationDelay: `${i * 0.2}s` }}
                     />
@@ -302,12 +313,15 @@ export default function WishCard({ wish }: WishCardProps) {
               )}
             </div>
 
+            {/* 第二行：按讚按鈕 - 手機端更緊湊 */}
+            <div className="flex justify-center sm:justify-end">
               <Button
                 onClick={handleLike}
                 disabled={hasLiked || isLiking}
                 size="sm"
                 className={`
-                transition-all duration-300 transform hover:scale-105 px-3 md:px-4 py-2
+                  transition-all duration-300 transform hover:scale-105 px-3 sm:px-4 py-2
+                  w-full sm:w-auto
                   ${
                     hasLiked
                       ? "bg-pink-600/50 text-pink-200 border border-pink-500/50 cursor-not-allowed"
@@ -327,6 +341,7 @@ export default function WishCard({ wish }: WishCardProps) {
                 </span>
               </Button>
             </div>
+          </div>
 
           {hasLiked && (
             <div className="mt-2 pt-2 border-t border-pink-600/30">