fix: halve template gallery iframe scale so thumbnails are readable#2483
Merged
Conversation
Templates were rendered into a 800x450 internal iframe and scaled down
to fit ~280px gallery cards (scale ~0.35). That made text designed for
full-screen Anki review render at ~6px effective, so most thumbnails
looked empty even though their contents and CSS were correct.
Halve the internal canvas to 400x225. Scale ratio jumps to ~0.7,
effective text size roughly doubles, and the aspect ratio stays 16:9
so no layout shift. The detail modal still renders at 800x600 — that
surface exists to show the full-fidelity preview.
Triggered by user feedback that the gallery felt blank after the
conditional-blocks fix landed: the prior rendering filled space with
literal {{#Field}} tokens which, badly-rendered as they were, at least
left visible content; cleaning them up exposed how minimal the actual
designs look at 0.35x scale.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
✅ Deploy Preview for notion2anki ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
5 tasks
aalemayhu
added a commit
that referenced
this pull request
May 20, 2026
…2484) ## Summary Two gallery fixes in the same surface, prompted by user feedback after #2482 + #2483 deployed. ### 1. Cards fill the iframe edge to edge \`notion.css\` ships with \`body { margin: 2em auto; max-width: 900px }\` — that meant every Notion-flavoured starter (Default Basic/Cloze/Type-the-answer, Only Notion variants) rendered with a band of the gallery card background showing through the top and bottom of the iframe. Visible as a \"offset\" between the preview wrap and the card content. Separately, \"Raw Note (no style)\" has \`cssFile: null\` so \`noteType.css\` is empty — the wrapper left both html and body transparent, so the thumbnail showed whatever was behind the iframe. Fix in \`renderNoteTypePreview.ts > buildPreviewDocument\`: - Wrapper sets a default \`background: #fff; color: #111\` on html and body. - Wrapper re-asserts \`margin: 0 / padding: 0 / max-width: none / width: 100% / height: 100%\` on html and body *after* the template CSS, with \`!important\` so notion.css's \`body { margin: 2em auto; max-width: 900px }\` no longer wins. - Templates that set their own \`.card\` background (Quote = #1c1917, Alex Deluxe = blue gradient, Abhiyan = night-mode dark) still win because that selector is more specific than the body reset. ### 2. Section reorder — Starter note types lead the page Visible sections were ordered: 1. Your note types 2. Official 2anki templates 3. Starter note types Reordered to: 1. Your note types 2. **Starter note types** (Clean Basic, Modern Cloze, Vocabulary, Medical, Code, Minimal, Quote, Math & Science — polished designs) 3. Official 2anki templates (Default / Only Notion / Raw / Abhiyan / Alex variants) User's own work still leads. The polished gallery comes next so the first impression is the strong designs, not the historical defaults. ## Test plan - [x] \`pnpm --filter 2anki-web vitest run src/pages/TemplatesPage\` — 44 tests pass - [x] \`pnpm --filter 2anki-web typecheck\` clean - [x] \`pnpm --filter 2anki-web lint\` clean - [ ] After deploy: hard-refresh \`/templates\`, confirm Only Notion thumbnails fill the iframe (no dark band top/bottom), confirm Raw Note (no style) has a white background, confirm Starter section appears above Official 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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
Template gallery thumbnails at `/templates` were rendering into an 800×450 internal iframe and CSS-scaling down to fit ~280px gallery cards — scale factor ~0.35. Text designed for full-screen Anki review ended up at ~5–6px effective, so most thumbnails looked empty even though their CSS and content were correct.
This was a pre-existing weakness of the thumbnail design (since 2026-05-15) that the conditional-blocks fix from #2482 just exposed — before that, the literal `{{#Field}}` / `{{/Field}}` tokens filled space and gave the cards a sense of populated content; with proper section handling, the actual minimal designs are now visible.
What changed
`web/src/pages/TemplatesPage/TemplatesPage.module.css` — `.previewFrame`:
Aspect ratio stays 16:9, no layout shift, no other CSS changes. The `.modalFrame` (click-to-zoom preview) is left at 800×600 — that surface exists for the full-fidelity preview.
Test plan
Not building (deferred)
🤖 Generated with Claude Code
Need help on this PR? Tag
@codesmithwith what you need.