fix(ui): PhoneFrame sizing + iframe containment#76
Merged
Conversation
- Drop redundant inline pixel sizing on the iframe in mobile mode; let PhoneFrame's screen-area (375x812 via tokens) be the single source of truth so the iframe's default 2px frameborder cannot overflow the bezel. - Add flexShrink:0 + content-box on PhoneFrame outer so the frame keeps its 391x828 footprint when nested in flex layouts. - Strip the iframe browser border (border-0) and use block display in mobile mode so the rendered artifact fills the screen-area cleanly. - Add a home indicator stripe to match the iPhone-style bezel. - Center the PhoneFrame in the canvas (justify-center, min-h-full) with p-6 padding so it never butts against the toolbar. - Unit-test the sizing contract via PHONE_FRAME_SIZING constants.
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Findings
- No high-confidence issues found in added/modified lines.
Summary
- Review mode: initial
- No blocking/major/minor issues found in this diff.
- Residual risk: runtime visual/layout behavior for mobile preview centering and phone-frame overlays is only covered by a non-DOM unit test; no Playwright coverage added.
- Context note:
docs/VISION.mdanddocs/PRINCIPLES.mdwere requested but are unavailable in this checkout (Not found in repo/docs).
Testing
- Not run (automation)
- Suggested tests: add a Playwright assertion for mobile preview viewport frame dimensions, notch/home-indicator overlap, and inline-comment hint/composer positioning.
open-codesign Bot
hqhq1025
added a commit
that referenced
this pull request
Apr 19, 2026
…ner bezel User feedback on #76: sizing was correct but the device still looked melted into the cream canvas, the bezel was thick enough to clip iframe content, and the notch read as a bump rather than a real iPhone cut-out. Changes: - New tokens (--color-phone-body / --color-phone-island / --border-width-phone-bezel / --size-preview-mobile-island-{w,h}), light + dark variants - Single-layer deep space-gray body (no more outer cream + inner black double bezel) with a 3px bezel so artifact corners are not eaten - Centered Dynamic Island pill replaces the notch - Hide the click-to-comment hint pill in mobile viewport — it was overlapping the device chrome and the user has already opted into the small frame - Test contract updated: asserts body uses dedicated phone token (not --color-surface / --color-background) and exposes a stable test id + island token names
hqhq1025
added a commit
that referenced
this pull request
Apr 19, 2026
…ner bezel (#80) User feedback on #76: sizing was correct but the device still looked melted into the cream canvas, the bezel was thick enough to clip iframe content, and the notch read as a bump rather than a real iPhone cut-out. Changes: - New tokens (--color-phone-body / --color-phone-island / --border-width-phone-bezel / --size-preview-mobile-island-{w,h}), light + dark variants - Single-layer deep space-gray body (no more outer cream + inner black double bezel) with a 3px bezel so artifact corners are not eaten - Centered Dynamic Island pill replaces the notch - Hide the click-to-comment hint pill in mobile viewport — it was overlapping the device chrome and the user has already opted into the small frame - Test contract updated: asserts body uses dedicated phone token (not --color-surface / --color-background) and exposes a stable test id + island token names
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
用户截图显示 mobile preview 视觉灾难：frame 超大、内容溢出、iframe 露在 frame 外。本 PR 修复 PhoneFrame fixed pixel sizing + iframe containment + canvas centering。
Fixes
width/height像素值；交由 PhoneFrame 的 screen-area (375x812 via tokens) 单一来源控制。同时border-0干掉浏览器默认 2px frameborder，避免 4px 溢出 PhoneFrameoverflow:hidden边界。flexShrink:0+boxSizing:'content-box'，frame 始终保持 391x828 (375 + 8px border × 2)，符合 iPhone 参考尺寸 ~396x844。justify-start改为justify-center+min-h-full+p-6，frame 在画布中央，留出 padding。PHONE_FRAME_SIZING常量，单测验证 375x812 屏 + 8px bezel = 391x828 整机。Test plan
pnpm --filter @open-codesign/desktop test— 227 passed (含新增 PhoneFrame.test.ts 3 cases)pnpm typecheck— 10/10 packages greenpnpm lint— 0 new warningsPRINCIPLES §5b