bytescale / bytescale-upload-widget

Beautiful JavaScript Upload Widget | Powered by Bytescale
https://www.bytescale.com/docs/upload-widget
MIT License
99 stars 10 forks source link

Incorrectly sized cropper on mobile viewports #21

Closed kincaidoneil closed 1 year ago

kincaidoneil commented 1 year ago

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

ljwagerfield commented 1 year ago

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.)