From f37e8be763f0c09592017891754b0809dc158983 Mon Sep 17 00:00:00 2001
From: Sam Bender <2336186+rednebmas@users.noreply.github.com>
Date: Tue, 3 Mar 2026 13:11:00 -0800
Subject: [PATCH 1/5] Improve chord memory card text prompt typography

Replace prose prose-sm with custom react-markdown component overrides
that map to the app's existing typography system (heading-lg, caption),
giving proper visual hierarchy for flashcard-sized content.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/react/src/components/FlashCards/TextCardPrompt.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/react/src/components/FlashCards/TextCardPrompt.tsx b/apps/react/src/components/FlashCards/TextCardPrompt.tsx
index ef74093c..043c326b 100644
--- a/apps/react/src/components/FlashCards/TextCardPrompt.tsx
+++ b/apps/react/src/components/FlashCards/TextCardPrompt.tsx
@@ -14,7 +14,14 @@ export const TextCardPrompt: React.FC<TextCardPromptProps> = ({
 	correctCount = 0,
 }) => (
 	<div className="flex flex-col items-center justify-center text-center gap-2">
-		<ReactMarkdown className="prose prose-sm max-w-none dark:prose-invert pt-3">
+		<ReactMarkdown
+			className="max-w-none pt-3 flex flex-col items-center gap-1"
+			components={{
+				h1: ({ children }) => <p className="heading-lg">{children}</p>,
+				h2: ({ children }) => <p className="caption">{children}</p>,
+				p: ({ children }) => <p className="heading-lg">{children}</p>,
+			}}
+		>
 			{text}
 		</ReactMarkdown>
 		<div className="mb-auto">

From a973662c8680ba02f4e3bdf786d4ade70268d387 Mon Sep 17 00:00:00 2001
From: Sam Bender <2336186+rednebmas@users.noreply.github.com>
Date: Tue, 3 Mar 2026 13:19:59 -0800
Subject: [PATCH 2/5] Move options menu from absolute overlay to flow-based
 header row

The three-dot menu was absolutely positioned over the card content,
creating awkward spacing. Move it into a proper flex row so the
content sits cleanly below it.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/react/src/components/FlashCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/react/src/components/FlashCard.tsx b/apps/react/src/components/FlashCard.tsx
index c4096e5b..f6cd0a11 100644
--- a/apps/react/src/components/FlashCard.tsx
+++ b/apps/react/src/components/FlashCard.tsx
@@ -49,13 +49,13 @@ export const FlashCard = forwardRef<HTMLDivElement, FlashCardProps>(
 		return (
 			<div
 				ref={ref}
-				className={`relative card-container flex flex-col justify-between items-center min-w-[15rem] m-h-60  m-4 ${className}`}
+				className={`card-container flex flex-col items-center min-w-[15rem] m-h-60 m-4 ${className}`}
 				style={{
 					opacity,
 					transition: 'opacity 0.5s ease',
 				}}
 			>
-				<div className="absolute right-1 top-1">
+				<div className="w-full flex justify-end -mb-2">
 					<FlashCardOptionsMenu card={card} showEdit={showEdit} showDelete={showDelete} />
 				</div>
 				<div className="text-4xl font-medium flex flex-1 justify-center items-center">

From f1e51033afe36ff8105570acaf64c16143280f1f Mon Sep 17 00:00:00 2001
From: Sam Bender <2336186+rednebmas@users.noreply.github.com>
Date: Tue, 3 Mar 2026 13:26:26 -0800
Subject: [PATCH 3/5] Revert to absolute menu, use heading-md for plain text
 prompts

heading-lg (text-3xl) made plain text prompts wider than the card,
pushing past the three-dot menu. Use heading-md (text-2xl) for plain
text while keeping heading-lg for explicit h1 titles.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/react/src/components/FlashCard.tsx                 | 4 ++--
 apps/react/src/components/FlashCards/TextCardPrompt.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/react/src/components/FlashCard.tsx b/apps/react/src/components/FlashCard.tsx
index f6cd0a11..05ef9d8e 100644
--- a/apps/react/src/components/FlashCard.tsx
+++ b/apps/react/src/components/FlashCard.tsx
@@ -49,13 +49,13 @@ export const FlashCard = forwardRef<HTMLDivElement, FlashCardProps>(
 		return (
 			<div
 				ref={ref}
-				className={`card-container flex flex-col items-center min-w-[15rem] m-h-60 m-4 ${className}`}
+				className={`relative card-container flex flex-col justify-between items-center min-w-[15rem] m-h-60 m-4 ${className}`}
 				style={{
 					opacity,
 					transition: 'opacity 0.5s ease',
 				}}
 			>
-				<div className="w-full flex justify-end -mb-2">
+				<div className="absolute right-1 top-1">
 					<FlashCardOptionsMenu card={card} showEdit={showEdit} showDelete={showDelete} />
 				</div>
 				<div className="text-4xl font-medium flex flex-1 justify-center items-center">
diff --git a/apps/react/src/components/FlashCards/TextCardPrompt.tsx b/apps/react/src/components/FlashCards/TextCardPrompt.tsx
index 043c326b..3ab3f434 100644
--- a/apps/react/src/components/FlashCards/TextCardPrompt.tsx
+++ b/apps/react/src/components/FlashCards/TextCardPrompt.tsx
@@ -19,7 +19,7 @@ export const TextCardPrompt: React.FC<TextCardPromptProps> = ({
 			components={{
 				h1: ({ children }) => <p className="heading-lg">{children}</p>,
 				h2: ({ children }) => <p className="caption">{children}</p>,
-				p: ({ children }) => <p className="heading-lg">{children}</p>,
+				p: ({ children }) => <p className="heading-md">{children}</p>,
 			}}
 		>
 			{text}

From e0ca0b1d76506002885b566710042549cd1d3721 Mon Sep 17 00:00:00 2001
From: Sam Bender <2336186+rednebmas@users.noreply.github.com>
Date: Tue, 3 Mar 2026 15:06:58 -0800
Subject: [PATCH 4/5] Fix card layout: use flow-based header row for options
 menu

Replace absolute positioning with a flex row so the three-dot menu
no longer overlaps card content (especially larger Text Prompt markdown).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/react/src/components/FlashCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/react/src/components/FlashCard.tsx b/apps/react/src/components/FlashCard.tsx
index 05ef9d8e..accb8b22 100644
--- a/apps/react/src/components/FlashCard.tsx
+++ b/apps/react/src/components/FlashCard.tsx
@@ -49,13 +49,13 @@ export const FlashCard = forwardRef<HTMLDivElement, FlashCardProps>(
 		return (
 			<div
 				ref={ref}
-				className={`relative card-container flex flex-col justify-between items-center min-w-[15rem] m-h-60 m-4 ${className}`}
+				className={`card-container flex flex-col items-center min-w-[15rem] m-h-60 m-4 ${className}`}
 				style={{
 					opacity,
 					transition: 'opacity 0.5s ease',
 				}}
 			>
-				<div className="absolute right-1 top-1">
+				<div className="w-full flex justify-end -mb-3">
 					<FlashCardOptionsMenu card={card} showEdit={showEdit} showDelete={showDelete} />
 				</div>
 				<div className="text-4xl font-medium flex flex-1 justify-center items-center">

From 9bf6feff941634f950dcb08c9609f3ea8e3b2d77 Mon Sep 17 00:00:00 2001
From: Sam Bender <2336186+rednebmas@users.noreply.github.com>
Date: Tue, 3 Mar 2026 19:00:50 -0800
Subject: [PATCH 5/5] Fix menu row: fully collapse with -mb-9, restore
 justify-between

The -mb-3 only reclaimed 12px of the 36px menu row, pushing card
content down. Use -mb-9 to fully collapse the row so cards match
their original height. Add z-10 so the menu stays clickable above
overlapping content. Restore justify-between on the container.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/react/src/components/FlashCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/react/src/components/FlashCard.tsx b/apps/react/src/components/FlashCard.tsx
index accb8b22..43fb3749 100644
--- a/apps/react/src/components/FlashCard.tsx
+++ b/apps/react/src/components/FlashCard.tsx
@@ -49,13 +49,13 @@ export const FlashCard = forwardRef<HTMLDivElement, FlashCardProps>(
 		return (
 			<div
 				ref={ref}
-				className={`card-container flex flex-col items-center min-w-[15rem] m-h-60 m-4 ${className}`}
+				className={`card-container flex flex-col justify-between items-center min-w-[15rem] m-h-60 m-4 ${className}`}
 				style={{
 					opacity,
 					transition: 'opacity 0.5s ease',
 				}}
 			>
-				<div className="w-full flex justify-end -mb-3">
+				<div className="relative z-10 w-full flex justify-end -mb-9">
 					<FlashCardOptionsMenu card={card} showEdit={showEdit} showDelete={showDelete} />
 				</div>
 				<div className="text-4xl font-medium flex flex-1 justify-center items-center">