codesandbox / codesandbox/codesandbox-client
Responsive preview resizing issue
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 13.6k
- Forks
- 2.4k
- Avg merge
- 6d 19h
- Merged PRs (30d)
- 2
Description
🐛 bug report
Preflight Checklist
- I have read the Contributing Guidelines for this project.
- I agree to follow the Code of Conduct that this project
adheres to. - I have searched the issue tracker for an issue that matches the one I want
to file, without success.
Description of the problem
When you resize the responsive preview by fastly moving the mouse, and when the cursor goes over the iframe containing the preview, the resizing stops. The iframe swallows the onmousemove event, and thus stops the resizing.
How has this issue affected you? What are you trying to accomplish?
It prevents the user from resizing the responsive preview at a fast pace. You have to be careful so as to not let the cursor go over the iframe. This becomes a problem when when the responsive preview is set to a high resolution (eg. FHD).
To Reproduce
I've attached a before/after video. Alternatively, to reproduce it, just open a sandobx, click on toggle responsive preview, and try resizing the preview.
How it works now:
How it's supposed to work:
Link to sandbox: Open any sandbox to reproduce this issue.
Your Environment
| Software | Name/Version |
|---|---|
| Сodesandbox | 0.1.0 |
| Browser | Chrome 96 |
| Operating System | MacOS Monterey |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue in the responsive preview and trace the resize interaction around the preview iframe. The work is done when dragging continues smoothly even while the cursor passes over the iframe.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100