Automattic / Automattic/simplenote-electron
Web App: Large left margin on Chrome browser
- Dominant language
- TypeScript
- Stars
- 5.3k
- Forks
- 588
- Avg merge
- 9h 45m
- Merged PRs (30d)
- 4
Description
The left margin of the note's editing view on the web app using the Chrome browser is large when the browser window is in full screen on a 27" inch monitor. Sometimes, the text on the notes will look squashed if the window is narrowed.
This doesn't happen on the Firefox browser.
### Expected
I would expect the left margin of the note editor to be reduced in the Chrome browser.
### Observed
The left margin of the note editor is very large and it only happens on the Chrome browser.
### Reproduced
1. Log in to https://app.simplenote.com on Chrome
2. Expand the browser's window to full size. See there's a large gap on the left of the note
3. Minimize the browser's window. The large gap on the left is still there, and occassionaly causing the text on the notes look squashed. (Screenshot can be found in 3466148-zen. I'm also getting the permission to add the screenshots to this report)
**Screen recordings**
* Tested on Google Chrome Version 86.0.4240.183 (Official Build) (x86_64) on macOS: https://d.pr/i/3M4Bfz/Xla2vYxdou
* Tested on Firefox version 82.0.2 (64-bit) on macOS: https://d.pr/i/NgN1RV/13Sf4FcVns
Additional screen recording on Firefox right after I performed the test on Google Chrome: https://d.pr/i/wypOUg/vfpFUYVug7. It looks like the same behavior on Chrome can be seen on Firefox but it was resolved by its own after that.
### Where did you see the bug
Information shared in 3466148-zen.
- OS: Windows
- OS version: Windows 10 64bits
- Browser (if applicable): Chrome
- Browser version (if applicable): Version 86.0.4240.111 (Official Build) (64-bit)
- Simplenote app version: https://app.simplenote.com
Contributor guide
Research direction
Start by reproducing the note editor layout at app.simplenote.com in Chrome and Firefox, using the reported full-size and narrowed-window cases and the linked recordings for comparison. Trace the web app's editor layout entry point and identify the browser-specific margin or squashing behavior. Done means the Chrome editor has the expected reduced left margin without causing narrowed-window text to squash, while Firefox remains unaffected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100