Currently, non-square avatar images are handled with object-cover to prevent distortion (#13), but this means the crop is always center-aligned and users have no control over which part of the image is shown.
Desired behavior:
After selecting an image file, show a crop UI that lets the user pan and zoom to select a square region before uploading. This ensures the avatar always looks intentional rather than relying on an automatic center crop.
Considerations:
- A library like
react-easy-crop or react-image-crop could handle the crop interaction
- The cropped image should be generated client-side (canvas) before uploading to R2, keeping the upload pipeline unchanged
- The crop UI should appear inline in the
AvatarUpload component (settings page)
- Keep the 2MB file size limit, applied to the final cropped output
Currently, non-square avatar images are handled with
object-coverto prevent distortion (#13), but this means the crop is always center-aligned and users have no control over which part of the image is shown.Desired behavior:
After selecting an image file, show a crop UI that lets the user pan and zoom to select a square region before uploading. This ensures the avatar always looks intentional rather than relying on an automatic center crop.
Considerations:
react-easy-croporreact-image-cropcould handle the crop interactionAvatarUploadcomponent (settings page)