fix: center gallery preview cards and add Image Occlusion fallback#2486
Merged
Conversation
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, plus parts of the user-saved defaults) rendered short text in the top-left and left 70%+ of the thumbnail blank. Wrapper now sets 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 they're equally specific and come later in the cascade. 2. Pointer-events off on form fields. Default (Type the answer) includes <input> in the qfmt; in the preview it was rendering as a focusable text box that looked broken at thumbnail scale. input, button, select, textarea now have pointer-events: none in the wrapper — they still render as styled elements but can't be focused. 3. Image Occlusion fallback. The canvas + script that Anki uses to draw masks can't run in sandbox=""; the thumbnail was always blank except for the Header text. Hide #image-occlusion-canvas via CSS and inject a "install in Anki to see masks" message via ::after on the container. 4. Background defaults stay (from #2484). White card behind every template that doesn't set its own — Raw Note included. 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. |
|
6 tasks
aalemayhu
added a commit
that referenced
this pull request
May 20, 2026
#2487) ## Summary The previous fix (#2486) added \`body > .card { display: flex; ... padding: 16px; text-align: center }\` to the iframe wrapper. That selector is specificity 0,1,1 — higher than templates' own \`.card { ... }\` (0,1,0) — so it stomped every template that had its own centering and padding. ### Visible breakage - **Live editor preview broken**: \`/templates/edit/vocab-language\` no longer centers because Vocabulary's \`.card { display: flex; align-items: center; padding: 32px 24px }\` was overridden by my wrapper. - **Clean Basic** gallery thumbnail clipped the \`?\` from "What is the capital of France?" on the right edge (16px padding ate into the content area while the template's font size still assumed 800px internal). - **Alexander Deluxe (Blue)** wrapped onto a second line that clipped at the bottom; **(Blue — Cloze)** lost the leading "The". ## What changes One line in \`renderNoteTypePreview.ts\`: wrap the default \`.card\` layout rule in \`:where(body > .card)\` (specificity drops to 0,0,0). Templates' own \`.card\` rules now always win. Templates without a \`.card\` display rule (Default, Only Notion, Raw Note, Minimal) still get flex-column centering as the fallback. Padding removed — that's the template's call. ## 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: \`/templates/edit/vocab-language\` shows Vocab centered again - [ ] After deploy: Clean Basic + Alexander Deluxe text no longer clips at edges 🤖 Generated with [Claude Code](https://claude.com/claude-code) <!-- codesmith:footer --> --- <a href="https://app.blacksmith.sh/2anki/codesmith/server/pr/2487"><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
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 `` 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
🤖 Generated with Claude Code
Need help on this PR? Tag
@codesmithwith what you need.