[Bug]: Design scaling not working

[dusssk12]

Description

After generating a design with Deepseek v4 pro, I could not fully see the design since the preview was not wide enough, even after making it as wide as possible. I tried to open it in a tab, which did not do anything for the visuals. Then I tried scaling, every option, but nothing changes whether it's set to a percentage or fit. I know I can export it to .html and preview in a browser, it is just really inefficient.

Steps to reproduce

1. Generate a design
2. Scale the preview or "Open in tab"

Expected behavior

The scale of the generated design should have changed

Actual behavior

No scaling was happening and only part (~half) of the preview was visible at a time

open-codesign version

0.2.1

Platform

macOS

OS version

26.5.1 (25F80)

Model provider (if relevant)

Other

Error code

No response

Diagnostics bundle

No response

Logs

[github-actions]

Thank you for the detailed report! This looks like a preview scaling bug in the sandbox renderer.

What I’ve found so far:

The preview is rendered inside an Electron <iframe> using srcdoc with esbuild-wasm and import maps (see packages/runtime/). The scaling controls (percentage / fit) likely adjust the iframe's zoom via CSS transform: scale() or the <webview> zoom factor, while "Open in tab" opens the rendered artifact in a separate browser window. If neither changes the visible portion, the issue could be:

• The scaling logic is not applying to the iframe content properly (possible event-handling mismatch).
• The generated artifact has a fixed viewport width that overrides the preview container.
• A regression in v0.2.0 → v0.2.1 (note: the root package.json shows 0.2.0, so the version in your report may differ from the release tag – please confirm via Help > About).

Need more info to narrow it down:

1. Exact app version (from Help → About Open CoDesign or the installed package).
2. Do the scaling buttons (percentage buttons, fit button) appear clickable but have no effect, or are they greyed out?
3. A screenshot or short screen recording showing the preview and the controls would be very helpful.
4. What are the rough dimensions of the generated design? (e.g., a wide landing page vs. a mobile layout) – this can hint at whether the issue is container sizing vs. zoom logic.

Related code areas (for maintainers):

• apps/desktop/src/renderer/components/PreviewPanel.tsx – scaling controls
• packages/runtime/src/sandbox.ts – iframe sandbox setup

I didn’t find an identical open issue about scaling, but similar preview layout issues have been discussed in #186 (sandbox error handling) and noted in the internal preview fix plan (.Codex/workspace/preview_blank_fix_plan.md).

Thank you for helping improve the preview experience!

---

Open-CoDesign Bot

[dusssk12]

Thank you for the detailed report! This looks like a preview scaling bug in the sandbox renderer.

What I’ve found so far:

The preview is rendered inside an Electron <iframe> using srcdoc with esbuild-wasm and import maps (see packages/runtime/). The scaling controls (percentage / fit) likely adjust the iframe's zoom via CSS transform: scale() or the <webview> zoom factor, while "Open in tab" opens the rendered artifact in a separate browser window. If neither changes the visible portion, the issue could be:

* The scaling logic is not applying to the iframe content properly (possible event-handling mismatch).

* The generated artifact has a fixed viewport width that overrides the preview container.

* A regression in v0.2.0 → v0.2.1 (note: the root `package.json` shows `0.2.0`, so the version in your report may differ from the release tag – please confirm via `Help > About`).

Need more info to narrow it down:

1. **Exact app version** (from `Help` → `About Open CoDesign` or the installed package).

2. **Do the scaling buttons (percentage buttons, fit button) appear clickable but have no effect, or are they greyed out?**

3. **A screenshot or short screen recording** showing the preview and the controls would be very helpful.

4. **What are the rough dimensions of the generated design?** (e.g., a wide landing page vs. a mobile layout) – this can hint at whether the issue is container sizing vs. zoom logic.

Related code areas (for maintainers):

* `apps/desktop/src/renderer/components/PreviewPanel.tsx` – scaling controls

* `packages/runtime/src/sandbox.ts` – iframe sandbox setup

I didn’t find an identical open issue about scaling, but similar preview layout issues have been discussed in #186 (sandbox error handling) and noted in the internal preview fix plan (.Codex/workspace/preview_blank_fix_plan.md).

Thank you for helping improve the preview experience!

Open-CoDesign Bot

It is a desktop layout for a web app. The design seems to scale normally (responsive) in the preview and also the exported html. I stretched the preview page as much as I could but it's still only about 60% of the viewport's width, so I can not see the full thing. The buttons are clickable but nothing is happening. And also there is no help > about option, so I can not look into that.

[github-actions]

Thank you for the additional details! This confirms the buttons are clickable but the scaling logic isn't applying to the iframe content. The fact that the design is responsive but the preview only shows ~60% width even when stretched suggests the preview container itself is constrained, likely by CSS (e.g., max-width on the iframe or its parent) or by the zoom not being passed through.

What I can verify from the codebase:

• The preview scaling controls are in apps/desktop/src/renderer/components/PreviewPanel.tsx – this is where the zoom state would be managed.
• The iframe sandbox setup is in packages/runtime/src/sandbox.ts – the zoom is likely applied via CSS transform: scale() or a <webview> zoom factor.
• "Open in tab" probably calls an IPC handler in apps/desktop/src/main/ipc/preview.ts – if that handler is missing or broken, the button would appear clickable but do nothing.

Since you don't have Help > About: That's useful feedback – we'll note that the menu item may be missing in v0.2.0. Could you check the app version from the installer name (e.g., Open CoDesign 0.2.1.dmg) or from the app's Info.plist?

One thing that would help a lot: A screenshot of the preview panel showing the controls and the visible portion of the design – this would reveal if the container itself is sized incorrectly. Also, any console errors (View > Toggle Developer Tools) would be valuable.

Thank you for helping improve the preview experience!

Open-CoDesign Bot