Improve chord memory card text prompt typography#271
Open
Conversation
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>
Contributor
🔴 Test Failures DetectedView the full Playwright report here. |
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>
Contributor
🔴 Test Failures DetectedView the full Playwright report here. |
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>
Contributor
🔴 Test Failures DetectedView the full Playwright report here. |
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>
Contributor
🔴 Test Failures DetectedView the full Playwright report here. |
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>
Contributor
🔴 Test Failures DetectedBelow is a gallery of each test’s actual vs diff. Click to view full-size or run locally: View the full Playwright report here. custom-deck-chord-memory-to-study-question
custom-deck-notation-cross-clef-tie-study-1
custom-deck-notation-to-study
custom-text-prompt-cross-clef-study-1
study-screen-end-to-end
To update all screenshot snapshots, run the Update Screenshot Test PNGs workflow. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
prose prose-smwith customreact-markdowncomponent overrides inTextCardPrompt# Title→heading-lg(large, bold) for song/piece names## Label→caption(small, muted) for section labelsheading-lgso single-line prompts likeCm7render at proper flashcard sizeTest plan
yarn test:codex— all 94 tests pass🤖 Generated with Claude Code