From 913d31100f3535e7c598be3baf734e6b904dad3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=84=AD=E6=B2=9B=E8=BB=92?= <jettcheng1018@gmail.com>
Date: Wed, 24 Sep 2025 17:29:47 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=B0=A1=E5=8C=96=E4=BE=8B?=
 =?UTF-8?q?=E5=8F=A5=E5=9C=96=E7=89=87=E6=96=B0=E5=A2=9E=E6=8C=89=E9=88=95?=
 =?UTF-8?q?=E8=A8=AD=E8=A8=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除內聯樣式避免尺寸衝突
- 改用div結構取代button標籤
- 純粹依賴Tailwind類別控制大小
- 保持完整的互動效果

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/app/flashcards/page.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/app/flashcards/page.tsx b/frontend/app/flashcards/page.tsx
index b257c2b..4bd230c 100644
--- a/frontend/app/flashcards/page.tsx
+++ b/frontend/app/flashcards/page.tsx
@@ -579,16 +579,18 @@ function FlashcardItem({ card, searchTerm, onEdit, onDelete, onToggleFavorite, g
                 />
               ) : (
                 // 沒有例句圖片時顯示新增按鈕
-                <button
+                <div
+                  className="w-full h-full flex items-center justify-center cursor-pointer hover:bg-blue-50 transition-colors group"
                   onClick={onGenerateExampleImage}
-                  className="w-full h-full flex flex-col items-center justify-center text-gray-500 hover:text-blue-600 hover:bg-blue-50 transition-colors group"
                   title="點擊生成例句圖片"
                 >
-                  <svg className="w-8 h-8 mb-2 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
-                  </svg>
-                  <span className="text-xs font-medium">新增例句圖</span>
-                </button>
+                  <div className="text-center">
+                    <svg className="w-8 h-8 mx-auto mb-2 text-gray-400 group-hover:text-blue-600 group-hover:scale-110 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                    </svg>
+                    <span className="text-xs text-gray-500 group-hover:text-blue-600 transition-colors">新增例句圖</span>
+                  </div>
+                </div>
               )}
             </div>