Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Images in comment preview are not scaled down to container width on mobile #4382

Closed
Amorpheuz opened this issue Oct 11, 2019 · 1 comment · Fixed by #4466
Closed

Images in comment preview are not scaled down to container width on mobile #4382

Amorpheuz opened this issue Oct 11, 2019 · 1 comment · Fixed by #4466
Labels
area: publishing experience issues related to an authors experience publishing. Tags, series, etc. bug always open for contribution external contributors welcome contribution is welcome!

Comments

@Amorpheuz
Copy link
Contributor

Describe the bug
The image when uploaded through the mobile site/PWA isn't scaled down to fit the comment's container when in preview mode.

There is an earlier issue which #3264 which was marked as a duplicate of #3085 which was fixed by #3086 but from what I can see, that only tackles the image upload button's issue.

To Reproduce

  1. Open any article on DEV, say this
  2. Go to comments, upload a large sized image. (In my case I just added a screenshot)
  3. Click on the preview button.
  4. The image will overflow.

Expected behavior
The image scales down to the preview container's size as it does when the comment is posted.

Screenshots
image

Desktop (please complete the following information):

  • OS: N/A
  • Browser: N/A
  • Version: N/A

Smartphone (please complete the following information):

  • Device: Nokia 6.1
  • OS: Android 9
  • Browser: Chrome
  • Version: 77.0.3865.116

Additional context
The image is correctly sized when posted as the CSS for class single-comment-node adds CSS for the image to be max-width: 100%. A similar CSS solution should be viable for the preview.
@Amorpheuz Amorpheuz changed the title Images in comment preview not scaled to container width on mobile Images in comment preview not scaled down to container width on mobile Oct 11, 2019
@Amorpheuz Amorpheuz changed the title Images in comment preview not scaled down to container width on mobile Images in comment preview are not scaled down to container width on mobile Oct 11, 2019
@weekly-digest weekly-digest bot mentioned this issue Oct 14, 2019
Closed
@rhymes rhymes added the bug always open for contribution label Oct 14, 2019
@rhymes rhymes added area: publishing experience issues related to an authors experience publishing. Tags, series, etc. hacktoberfest external contributors welcome contribution is welcome! labels Oct 14, 2019
@Amorpheuz
Copy link
Contributor Author

I would like to take up this issue 😄

@Amorpheuz Amorpheuz mentioned this issue Oct 16, 2019
Merged
7 tasks
benhalpern pushed a commit that referenced this issue Oct 26, 2019
@Amorpheuz @benhalpern
[deploy] Fix Image Overflow in Comment Preview - #4382 (#4466)
3fde5b8 
* Update CSS for img in .comment-preview-div

- Enforces `max-width:100%` on images in .comment-preview-div to prevent them from overflowing their container.

* Implement Recommended Changes

- Enforces `max-width:100%` on images in .comment-preview-div to prevent them from overflowing their container.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: publishing experience issues related to an authors experience publishing. Tags, series, etc. bug always open for contribution external contributors welcome contribution is welcome!
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[deploy] Fix Image Overflow in Comment Preview - #4382
2 participants
@rhymes @Amorpheuz