From dda7d64dee4a598030fed9b491b21cd4eef35acf Mon Sep 17 00:00:00 2001
From: goddonebianu <goddonebianu@outlook.com>
Date: Wed, 18 Mar 2026 14:22:00 +0800
Subject: [PATCH] fix: add scrollable container to Memorize card to prevent
 button jumping

---
 src/app/decks/[deck_id]/learn/Memorize.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/decks/[deck_id]/learn/Memorize.tsx b/src/app/decks/[deck_id]/learn/Memorize.tsx
index 45c2893..baeaec0 100644
--- a/src/app/decks/[deck_id]/learn/Memorize.tsx
+++ b/src/app/decks/[deck_id]/learn/Memorize.tsx
@@ -366,8 +366,9 @@ const Memorize: React.FC<MemorizeProps> = ({ deckId, deckName }) => {
         </HStack>
       </VStack>
 
-      <div className={`bg-white border border-gray-200 rounded-xl shadow-sm mb-6 ${myFont.className}`}>
-        {isDictation ? (
+      <div className={`bg-white border border-gray-200 rounded-xl shadow-sm mb-6 h-[50dvh] flex flex-col ${myFont.className}`}>
+        <div className="flex-1 overflow-y-auto">
+          {isDictation ? (
           <>
             <VStack align="center" justify="center" gap={4} className="p-8 min-h-[20dvh]">
               {currentCard.ipa ? (
@@ -411,6 +412,7 @@ const Memorize: React.FC<MemorizeProps> = ({ deckId, deckName }) => {
             )}
           </>
         )}
+        </div>
       </div>
 
       <HStack justify="center">