bytescale/bytescale-upload-widget

Incorrectly sized cropper on mobile viewports

Closed this issue · 1 comments

In a portrait mobile viewport (390 x 844), this is how the cropper renders a 1024x1024 image:

Screenshot 2023-04-12 at 3 58 10 PM

I'm using Tailwind. When I encountered this issue in versions <3.14.0, I resolved it by applying max-width: unset; to .uploader__image-cropper__clip img to override Tailwind's global img { max-width: 100%; }, and everything seemed to render correctly.

I believe (part) of the issue is the higher specificity of this change overrides this style of .uploader__image-editor__image-inner:

https://github.com/upload-io/uploader/blob/ad8b0e7895f1232c521aea9cd8654b499f49a9fa/lib/src/components/widgets/uploader/components/editors/ImageEditorLayout.scss#L37-L40

Thank you for raising this, and for the great level of detail!

Fixed in 3.16.0.

Will update the various framework wrappers shortly (react-uploader, etc.)