feat(preview): add browser-chrome and phone-bezel frames to previews - #627
Open
Fardin7798 wants to merge 1 commit into
Open
feat(preview): add browser-chrome and phone-bezel frames to previews#627Fardin7798 wants to merge 1 commit into
Fardin7798 wants to merge 1 commit into
Conversation
Adds a lightweight visual frame around the desktop and mobile previews: - Desktop: macOS-style toolbar (traffic-light dots) above the page, rounded corners and a subtle shadow around the whole window. - Mobile: dark bezel with a top notch and a bottom home-indicator bar, rounded corners like a phone. The transform/scale that fits the preview to the available pane is now applied to the frame (chrome + iframe together) instead of the iframe alone, so the toolbar/bezel scale down in proportion with the page - the same way a real browser window looks when resized. Closes abi#176
Fardin7798
force-pushed
the
feat/preview-device-frames
branch
from
August 30, 2026 10:58
28517f3 to
416dc1f
Compare
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.
Closes #176.
What
Adds a lightweight visual frame around the desktop and mobile previews so they look like a real browser window / phone, instead of a bare iframe:
How
The transform/scale that fits the preview to the available pane was previously applied directly to the
<iframe>. It's now applied to a wrapping "frame" div that contains the chrome + the iframe together, so the toolbar/bezel scale down in proportion with the page — the same way a real browser window looks when you resize it. The iframe itself is unchanged for event handling / select-and-edit purposes (ref, load listeners, etc. all still target the iframe directly).Testing
tsc --noEmit— cleaneslinton the changed file — cleanvite build— succeedsScreenshots showing before/after happy to add if useful — let me know if you'd like a different visual treatment (e.g. lighter/no shadow, different bezel color).