From 67aa7832b1a23aa4583b230600e08a5b2ce8c6f1 Mon Sep 17 00:00:00 2001 From: Alexander Alemayhu Date: Wed, 20 May 2026 15:35:50 +0200 Subject: [PATCH] fix: center gallery preview cards and add Image Occlusion fallback MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 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) --- .../TemplatesPage/renderNoteTypePreview.ts | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/web/src/pages/TemplatesPage/renderNoteTypePreview.ts b/web/src/pages/TemplatesPage/renderNoteTypePreview.ts index 6a4e95bc4..d6209e42f 100644 --- a/web/src/pages/TemplatesPage/renderNoteTypePreview.ts +++ b/web/src/pages/TemplatesPage/renderNoteTypePreview.ts @@ -73,9 +73,30 @@ export function buildPreviewDocument( return `
${body}
`; }