Fix Image Cropper Dialog Layout and Maintain Loading Screen Size

[Avijit-ap]

Related Issue

Fixes #7

Description

The changes ensure that the dialog footer maintains a consistent height and width, regardless of the uploaded image size.

Changes Made

1. Added max-width and max-height constraints to the DialogContent to prevent it from exceeding 90% of the viewport dimensions.
2. Implemented a flex column layout for better control of the content within the dialog.
3. Made the content area scrollable to accommodate various image sizes.
4. Adjusted the ReactCrop component to fit within the available space while maintaining aspect ratio.
5. Ensured the DialogFooter remains at a consistent size by making it non-shrinkable.
6. Preserved the original size and appearance of the loading screen (AvatarFallback).
7. -Adds a new utility class to globals.css for scrollbar-hide utility class to hide the scrollbar while keeping scroll functionality

• Requires adding

How to Test

1. Open the Image Cropper dialog.
2. Upload images of various sizes and aspects ratios.
3. Verify that the dialog maintains a consistent layout for all images.
4. Check that the loading screen appears at its original size before the image loads.
5. Ensure the cropping functionality works as expected for all image sizes.
6. Test on different screen sizes to confirm responsive behavior.

Screenshots

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
shadcn-image-cropper	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 4, 2024 6:48pm

[FranprzDev]

Can you please remove the package-lock.json to tracked files in github?
This make a lot of noise on pr.

[Avijit-ap]

Can you please remove the package-lock.json to tracked files in github? This make a lot of noise on pr.

I have added the package-lock.json to gitignore,