From 4aee37540b626df2a3dd9bd99d199113c4380621 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=84=AD=E6=B2=9B=E8=BB=92?= <jettcheng1018@gmail.com>
Date: Sat, 27 Sep 2025 21:18:22 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=BE=A9FlipMemoryTest?=
 =?UTF-8?q?=E7=BF=BB=E5=8D=A1=E7=B5=84=E4=BB=B6=E9=A1=AF=E7=A4=BA=E5=95=8F?=
 =?UTF-8?q?=E9=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修正翻卡容器結構，讓整個卡片翻轉而非僅內容
- 將卡片樣式從外層容器移到翻轉容器
- 增加容器高度從400px到500px以容納背面更多內容
- 為背面內容添加overflow-y-auto防止內容溢出
- 移除重複的卡片樣式，統一視覺效果

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/review/review-tests/FlipMemoryTest.tsx  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/components/review/review-tests/FlipMemoryTest.tsx b/frontend/components/review/review-tests/FlipMemoryTest.tsx
index c559201..d0361dc 100644
--- a/frontend/components/review/review-tests/FlipMemoryTest.tsx
+++ b/frontend/components/review/review-tests/FlipMemoryTest.tsx
@@ -63,18 +63,18 @@ export const FlipMemoryTest: React.FC<FlipMemoryTestProps> = ({
       <div
         className={`card-container ${disabled ? 'pointer-events-none opacity-75' : 'cursor-pointer'}`}
         onClick={handleFlip}
-        style={{ perspective: '1000px', minHeight: '400px' }}
+        style={{ perspective: '1000px', minHeight: '500px' }}
       >
         <div
-          className={`card transition-transform duration-600 ${isFlipped ? 'rotate-y-180' : ''}`}
-          style={{ transformStyle: 'preserve-3d' }}
+          className={`card bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-600 ${isFlipped ? 'rotate-y-180' : ''}`}
+          style={{ transformStyle: 'preserve-3d', minHeight: '500px' }}
         >
           {/* 正面 */}
           <div
             className="card-face card-front absolute w-full h-full"
             style={{ backfaceVisibility: 'hidden' }}
           >
-            <div className="bg-white rounded-xl shadow-lg p-8 h-full hover:shadow-xl transition-shadow">
+            <div className="p-8 h-full">
               <div className="flex justify-between items-start mb-6">
                 <h2 className="text-2xl font-bold text-gray-900">翻卡記憶</h2>
                 <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
@@ -107,7 +107,7 @@ export const FlipMemoryTest: React.FC<FlipMemoryTestProps> = ({
             className="card-face card-back absolute w-full h-full"
             style={{ backfaceVisibility: 'hidden', transform: 'rotateY(180deg)' }}
           >
-            <div className="bg-white rounded-xl shadow-lg p-8 h-full">
+            <div className="p-8 h-full overflow-y-auto">
               <div className="flex justify-between items-start mb-6">
                 <h2 className="text-2xl font-bold text-gray-900">翻卡記憶</h2>
                 <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">