fix: card fills template preview iframe and starter section moves up#2484
Merged
Conversation
Two gallery fixes in the same surface.
1. notion.css ships with `body { margin: 2em auto; max-width: 900px }`
which made every Notion-flavoured starter render with a band of the
gallery card background showing through top and bottom of the iframe,
and "Raw Note (no style)" had no background at all because the wrapper
left both html and body transparent. The wrapper now sets a default
white background and re-asserts margin/padding/width on html and body
*after* the template CSS so the card always fills the iframe edge to
edge. Templates that set their own .card background (Quote, Alex
Deluxe, etc.) still win because that selector is more specific than
the body reset.
2. Reorder the gallery sections so the polished `defaultStarters`
(Clean Basic, Modern Cloze, Vocabulary Card, Medical Term, Code Card,
Minimal, Quote, Math & Science) lead the page, with the rougher
`officialStarters` (Default/Notion/Abhiyan/Alex variants) below them.
`Your note types` stays at the very top so a user's own work is the
first thing they see.
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
…2486) ## Summary Four gallery polish issues from the latest review. ### 1. Default-center .card content Templates without their own \`.card\` display rules (Default, Only Notion, Raw Note, Minimal, parts of user-saved defaults) rendered short text in the top-left, leaving 70%+ of the thumbnail blank. Wrapper now adds \`display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; text-align: center\` on \`body > .card\` as a default. Templates that set their own \`.card\` display (Quote, Vocabulary, Modern Cloze, Code Card, etc.) keep their own layout because their declarations are equally specific and come later in the cascade. ### 2. Inert form fields Default (Type the answer) renders an \`<input>\` in the qfmt; in the preview it became a focusable text box that looked broken at thumbnail scale. \`input, button, select, textarea { pointer-events: none }\` in the wrapper — they still render as styled elements but can't be focused. ### 3. Image Occlusion fallback The canvas + script Anki uses to draw masks can't run in \`sandbox=\"\"\`. The thumbnail was always blank except for the Header text. Hide \`#image-occlusion-canvas\` and inject \"Image occlusion preview — install in Anki to see masks\" via \`::after\` on the container. ### 4. Background defaults (still in place from #2484) White card behind every template that doesn't set its own background — Raw Note included. ## 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 Default Basic/Cloze/Type-the-answer + Only Notion + Raw Note + Minimal now center their content vertically, and Image Occlusion shows the fallback message instead of a blank canvas 🤖 Generated with [Claude Code](https://claude.com/claude-code) <!-- codesmith:footer --> --- <a href="https://app.blacksmith.sh/2anki/codesmith/server/pr/2486"><picture><source media="(prefers-color-scheme: dark)" srcset="https://pr-comments-assets.blacksmith.sh/codesmith/view-in-codesmith-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://pr-comments-assets.blacksmith.sh/codesmith/view-in-codesmith-light.svg"><img alt="View in Codesmith" src="https://pr-comments-assets.blacksmith.sh/codesmith/view-in-codesmith-dark.svg"></picture></a> <sup>Need help on this PR? Tag <code>@codesmith</code> with what you need.</sup> - [ ] Let Codesmith autofix CI failures and bot reviews <!-- /codesmith:footer --> Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
![https://pr-comments-assets.blacksmith.sh/codesmith/view-in-codesmith-dark.svg"><source](https://pr-comments-assets.blacksmith.sh/codesmith/view-in-codesmith-dark.svg"><source){kind=link}
![https://pr-comments-assets.blacksmith.sh/codesmith/view-in-codesmith-light.svg"><img](https://pr-comments-assets.blacksmith.sh/codesmith/view-in-codesmith-light.svg"><img){kind=link}
![https://pr-comments-assets.blacksmith.sh/codesmith/view-in-codesmith-dark.svg"></picture></a](https://pr-comments-assets.blacksmith.sh/codesmith/view-in-codesmith-dark.svg"></picture></a){kind=link}
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
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`:
2. Section reorder — Starter note types lead the page
Visible sections were ordered:
Reordered to:
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
🤖 Generated with Claude Code
Need help on this PR? Tag
@codesmithwith what you need.