[Bug] User unable to see real time changes

[agnijeetsharma]

Bug Report Template

Describe the bug

User is unable to see real time changes which he will made to the image .It is bad user experience @suryanshsingh2001 assign me this under hacktoberfest

To Reproduce

Steps to reproduce the behavior:

1. Go to '...' Try Now
2. Click on '...' Upload image
3. Scroll down to '...' scroll down and made changes user will not see what is the effect of changing parameter
4. See error Unable too see changes real time

Expected behavior

The side block of parameter should be scrollable and other should be fixed

Screenshots

Environment (please complete the following information):

• OS: [e.g., Windows, macOS]
• Browser: [e.g., Chrome, Safari]
• Version: [e.g., 22]
• Other relevant environment details (e.g., Node version, database version)

Additional context

Add any other context about the problem here (e.g., error logs, stack traces).

---

Optional Sections (if relevant):

• Priority ( High)
• Is this issue blocking your progress?
• Can you submit a PR to fix this? Yes

[suryanshsingh2001]

📝 Explaining the Issue Further

If you need more context on the issue you're working on, feel free to reach out! Here’s a bit more detail to help guide you:

• Issue Summary: Briefly explain the problem or goal of the task.
• Key Points: Highlight any important details or specific areas of focus.
• Resources: Mention any useful documentation or related PRs.

Please don’t hesitate to ask questions or request clarification if anything is unclear! We're here to help you succeed.

[agnijeetsharma]

@suryanshsingh2001 Issue Summary: When users want to modify image or file parameters, they need to scroll up to verify if the changes have taken effect, leading to a poor user experience.

Key Points: To enhance the UI, the parameters container should be scrollable while keeping the image or file fixed in view, allowing users to see changes in real-time without scrolling.

I have attached a video in which i am scrolling up and down to see desire changes in image

https://github.com/user-attachments/assets/350bbffc-1c7d-4941-b985-da4b2ffe0eb3

@suryanshsingh2001 assign to me this issue and label as hacktoberfest-accepted

[suryanshsingh2001]

Hey @agnijeetsharma , assigned you the issue. Please make sure to share your thought process, and the main implementation idea on this.

[agnijeetsharma]

@suryanshsingh2001 To solve this issue what can we do? We can add a scroll bar to the left container so that user can see real time changes on image he is editing

I have added scrollable property to the left container and fixed some changes. it is looking good. I have added video of the same if you like it i can request a PR

https://github.com/user-attachments/assets/926c8b4b-4d99-470d-9375-5c3f344862b1