cloud-hosting-platform/site-builder
6
0 Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Tablet/mobile canvas matches what publishes #37

New Issue
Closed
opened 2026-10-07 16:47:19 +00:00 by jknapp · 1 comment
jknapp commented 2026-10-07 16:47:19 +00:00
Owner
Copy link
Copy source

Tier: Quick win · Order: 10 of 35 · Effort: S · Impact: high

What

Switching to tablet or mobile hides elements marked hidden for that device and stacks columns, exactly like the live site.

Why

Audit: the canvas is a resized div, so published media queries never apply in the editor. The editor currently misrepresents mobile, which feeds the #2 complaint (responsive surprises). Also fixes a 768px vs 767px breakpoint mismatch.

Today

Hide toggles and stacking only visible in Preview or the live site.

Design notes

Add data-device on the canvas frame and mirror the published rules. Unify breakpoints to ≤767 mobile, 768-991 tablet, ≥992 desktop in both exporters. This removes the main argument for an iframe canvas.

Depends on

None

From the 2026-10-07 site-builder research (competitor review, user sentiment, code audit, Fable prioritization). Roadmap: https://claude.ai/artifact/QpQcSCk21z6SN7LPSm8tKE · id canvas-device-emulation

**Tier:** Quick win · **Order:** 10 of 35 · **Effort:** S · **Impact:** high ## What Switching to tablet or mobile hides elements marked hidden for that device and stacks columns, exactly like the live site. ## Why Audit: the canvas is a resized div, so published media queries never apply in the editor. The editor currently misrepresents mobile, which feeds the #2 complaint (responsive surprises). Also fixes a 768px vs 767px breakpoint mismatch. ## Today Hide toggles and stacking only visible in Preview or the live site. ## Design notes Add data-device on the canvas frame and mirror the published rules. Unify breakpoints to ≤767 mobile, 768-991 tablet, ≥992 desktop in both exporters. This removes the main argument for an iframe canvas. ## Depends on None --- From the 2026-10-07 site-builder research (competitor review, user sentiment, code audit, Fable prioritization). Roadmap: https://claude.ai/artifact/QpQcSCk21z6SN7LPSm8tKE · id `canvas-device-emulation`
jknapp added the tier: quick-wineffort: Simpact: high labels 2026-10-07 16:47:19 +00:00
jknapp referenced this issue from a commit 2026-10-07 21:10:18 +00:00
Merge issue-37 (Refs #37)
jknapp commented 2026-10-07 21:37:05 +00:00
Author
Owner
Copy link
Copy source

Shipped in WHP release 2026.10.3 (site-builder main bdb4789, deployed fleet-wide 2026-10-07). Implemented, reviewed and verified as part of the editor-polish batch.

Shipped in WHP release **2026.10.3** (site-builder `main` bdb4789, deployed fleet-wide 2026-10-07). Implemented, reviewed and verified as part of the editor-polish batch.
Sign in to join this conversation.
No Branch/Tag Specified
Labels
Clear labels
effort: L
effort: M
effort: S
effort: XL
impact: high
impact: low
impact: med
tier: bigger-bet
Larger differentiating features
 tier: core-polish
Makes it feel like a modern editor
 tier: fix-first
Data-safety and trust bugs
 tier: quick-win
Small changes that remove clunkiness now
No labels effort: S impact: high tier: quick-win
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
hub-agent Bot jknapp renovate-bot (Renovate Bot) whmcs-sam whp-cicd-user whp-deploy
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: cloud-hosting-platform/site-builder#37