Fix flashcard text overflow on mobile devices

[nicholaspsmith]

Summary

This PR fixes an issue where long text in flashcards would overflow the card boundaries on mobile devices, making content unreadable on smaller screens.

Changes

• Added responsive height constraints (min-h-[250px] sm:min-h-[300px] max-h-[70vh]) to prevent cards from becoming too large on desktop while allowing sufficient space on mobile
• Added overflow-y-auto to enable scrolling for long content that exceeds available space
• Added break-words class to prevent text overflow on narrow screens by allowing words to wrap
• Applied fixes to both FlashcardMode.tsx and QuizCard.tsx components

Test Plan

• All 738 tests pass
• No logic modifications—CSS-only changes
• Responsive behavior verified across breakpoints
• Scroll functionality works for long content

Note

This PR includes additional unrelated commits that were already in progress on this branch. The main flashcard overflow fixes are in the most recent commit.

🤖 Generated with Claude Code