fix(web): preserve deck thumbnail layout fidelity by lefarcen · Pull Request #7095 · nexu-io/open-design

lefarcen · 2026-08-18T17:58:26Z

Why

While reproducing a prerelease file-preview white screen, we found that deck thumbnails could visibly disagree with the active slide: authored flex layouts were flattened, and responsive decks could take a different media-query branch in the rail than in the main preview. This made the thumbnail column look partially unstyled and made slide navigation unreliable as a visual overview.

The root causes were:

the static thumbnail override forced every slide to display: block, replacing authored flex/grid layout;
viewport media queries inside a shadow-root thumbnail were evaluated against the host window instead of the preview iframe;
iframe-fallback readiness stored a function-valued source as a React state updater, leaving the loading cover visible.

What users will see

HTML/PPT-style decks now keep their authored slide layout in the thumbnail rail. Responsive decks render fallback thumbnails at the live preview viewport, so typography, wrapping, and breakpoint-dependent layout match the selected slide. The fallback loading cover also disappears after the thumbnail loads.

Surface area

UI — existing deck thumbnail rail behavior in apps/web
Keyboard shortcut — new or changed
CLI / env var — new od subcommand or flag, new tools-dev / tools-pack flag, or new OD_* env var
API / contract — new /api/* endpoint, new SSE event, or changed shape in packages/contracts
Extension point — new entry under skills/, design-systems/, design-templates/, or craft/, or change to the skills protocol
i18n keys — added new translation keys
New top-level dependency — adding any new entry to the root package.json
Default behavior change — existing deck thumbnails render with corrected layout fidelity
None — internal refactor, docs, tests, or translation update only

Screenshots

Before: the thumbnail renderer forced authored flex slides to block layout, producing compressed/misaligned content compared with the main preview.

After: manually verified in Chrome with both the reported hps-true-blueprint deck and a responsive 9-slide deck. The thumbnail and main preview use the same flex/grid layout and the same responsive viewport dimensions across resize and slide navigation.

Bug fix verification

Red specs:
- apps/web/tests/components/deck-slide-thumbnail.test.tsx
- apps/web/tests/components/deck-thumbnail-rail.test.tsx
- apps/web/tests/runtime/deck-thumbnail-parser.test.ts
Yes. The new layout override, responsive viewport, and loading-cover specs failed before the source change and pass on this branch.

Validation

pnpm --filter @open-design/web exec vitest run tests/components/deck-slide-thumbnail.test.tsx tests/components/deck-thumbnail-rail.test.tsx tests/runtime/deck-thumbnail-parser.test.ts tests/components/FileViewer.test.tsx (330 passed after syncing current main)
pnpm --filter @open-design/web typecheck
pnpm typecheck
pnpm guard
Chrome + Open Browser Use E2E: reported blueprint deck (static shadow path), responsive deck (iframe fallback), slide navigation, desktop resize, preset switching, loading-cover cleanup, and preview-observability event check

lefarcen · 2026-08-18T18:02:02Z

🧪 This PR has changes that need a manual QA pass before merge — please hold off self-merging for now; we'll loop QA in once it's merge-ready (and design/product have signed off, where applicable).

PerishCode

The viewport-matching fallback has one standards-level detection gap that leaves valid responsive decks on the divergent shadow-root path. Please extend the classifier and its fixture matrix before merge.

_{🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.}

github-actions · 2026-08-18T18:13:04Z

Visual regression review

Head: ca229f6 · Base: b084ab0

0 changed · 49 unchanged · 0 new without baseline · 0 failed

Unchanged cases

Case	Main	PR	Diff
visual-avatar-local-agent-list _{0 px (0.00%)}
visual-avatar-local-agent-list-panel _{0 px (0.00%)}
visual-avatar-menu _{0 px (0.00%)}
visual-avatar-menu-panel _{0 px (0.00%)}
visual-avatar-open-design-model-picker _{0 px (0.00%)}
visual-critical-settings _{0 px (0.00%)}
visual-critical-workspace _{0 px (0.00%)}
visual-critical-workspace-preview _{0 px (0.00%)}
visual-design-system-detail _{0 px (0.00%)}
visual-design-systems _{0 px (0.00%)}
visual-home _{0 px (0.00%)}
visual-home-catalog _{0 px (0.00%)}
visual-home-context-picker _{0 px (0.00%)}
visual-home-context-picker-popover _{0 px (0.00%)}
visual-home-plugin-filter _{0 px (0.00%)}
visual-home-plugin-use-staged _{0 px (0.00%)}
visual-home-plugin-use-with-query _{0 px (0.00%)}
visual-home-staged-attachment _{0 px (0.00%)}
visual-integrations _{0 px (0.00%)}
visual-integrations-mcp _{0 px (0.00%)}

Visual diff is advisory only and does not block merging.

…yout-fidelity

PerishCode

The responsive-thumbnail fallback still misses a standards-valid class of viewport queries, so the fidelity fix is incomplete for those decks. Please extend the classifier and its fixture matrix before merge.

_{🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.}

PerishCode

@lefarcen I reviewed the complete changed ranges for the deck thumbnail fidelity fix. The update preserves authored flex/grid display, routes viewport-dependent media queries through an iframe sized to the live preview, fixes function-valued readiness state, and adds focused coverage including Media Queries Level 4 range forms. The prior classifier blocker is resolved on this head, and the implementation is coherent with the surrounding viewer sizing flow. Nice work tightening both the visual behavior and the regression matrix.

_{🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.}

open-design-release-bot · 2026-08-19T03:00:12Z

Successfully created backport PR for release/v0.20.0:

[backport release/v0.20.0] fix(web): preserve deck thumbnail layout fidelity #7103

* fix(web): preserve deck thumbnail layout fidelity * fix(web): detect ranged viewport media queries (cherry picked from commit 4eacda5) Co-authored-by: lefarcen <935902669@qq.com>

fix(web): preserve deck thumbnail layout fidelity

d631054

lefarcen added the backport release/v0.20.0 Backport this fix to release/v0.20.0 label Aug 18, 2026

lefarcen requested a review from PerishCode August 18, 2026 18:01

lefarcen added size/M PR changes 100-300 lines risk/medium Medium risk: regular code changes type/bugfix Bug fix needs-validation Runtime change detected; needs human or /explore agent validation. labels Aug 18, 2026

PerishCode requested changes Aug 18, 2026

View reviewed changes

Comment thread apps/web/src/runtime/deck-thumbnail-parser.ts Outdated

xxiaoxiong approved these changes Aug 18, 2026

View reviewed changes

Merge remote-tracking branch 'origin/main' into fix/deck-thumbnail-la…

09510ad

…yout-fidelity

PerishCode requested changes Aug 18, 2026

View reviewed changes

Comment thread apps/web/src/runtime/deck-thumbnail-parser.ts Outdated

fix(web): detect ranged viewport media queries

ca229f6

lefarcen requested a review from PerishCode August 18, 2026 18:31

PerishCode approved these changes Aug 18, 2026

View reviewed changes

lefarcen requested a review from ivy-ting August 18, 2026 18:49

lefarcen removed the needs-validation Runtime change detected; needs human or /explore agent validation. label Aug 19, 2026

lefarcen added this pull request to the merge queue Aug 19, 2026

Merged via the queue into main with commit 4eacda5 Aug 19, 2026
25 checks passed

open-design-release-bot Bot mentioned this pull request Aug 19, 2026

[backport release/v0.20.0] fix(web): preserve deck thumbnail layout fidelity #7103

Merged

Navigation Menu

Uh oh!

fix(web): preserve deck thumbnail layout fidelity - #7095

fix(web): preserve deck thumbnail layout fidelity#7095
lefarcen merged 3 commits into
mainfrom
fix/deck-thumbnail-layout-fidelity

lefarcen commented Aug 18, 2026 •

edited

Loading

Uh oh!

lefarcen commented Aug 18, 2026

Uh oh!

PerishCode left a comment

Uh oh!

Uh oh!

github-actions Bot commented Aug 18, 2026 •

edited

Loading

Uh oh!

PerishCode left a comment

Uh oh!

Uh oh!

PerishCode left a comment

Uh oh!

Uh oh!

open-design-release-bot Bot commented Aug 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

lefarcen commented Aug 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why

What users will see

Surface area

Screenshots

Bug fix verification

Validation

Uh oh!

lefarcen commented Aug 18, 2026

Uh oh!

PerishCode left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Aug 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Visual regression review

Uh oh!

PerishCode left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

PerishCode left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

open-design-release-bot Bot commented Aug 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

lefarcen commented Aug 18, 2026 •

edited

Loading

github-actions Bot commented Aug 18, 2026 •

edited

Loading