fix: chat responsiveness & Auth box Scrolling

[code-par-learn]

Related Issue

The support chat was not responsive , covering the entire screen of the device

Closes: #[issue number]

Description of Changes

• Made changes to make the support chat responsive by adding a close button to it separately.
• this button is only for sm screens only
• doesn't cover the entier screen
• adjusted the chat to be scrollable in the small screen
• adjusted the margins to fit the sm sizes .
  • [ ] My code adheres to the established style guidelines of this project.
  • [ ] I have conducted a self-review of my code.
  • [ ] I have included comments in areas that may be difficult to understand.
  • [ ] I have made corresponding updates to the project documentation.
  • [ ] My changes have not introduced any new warnings.

  Screenshots

  Original	Updated

[vercel[bot]]

@code-par-learn is attempting to deploy a commit to the anmode's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions[bot]]

Thank you, @code-par-learn, for creating this pull request and contributing to GitHub-ReadMe! Our review team will thoroughly review the pull request and will reach out to you soon! Please make sure you have marked all the completed tasks as done. We appreciate your patience and contribution!

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
grabtern-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 28, 2024 0:27am

[anmode]

you can pass prettier test with this, npx prettier --write .

[anmode]

https://github.com/user-attachments/assets/67fd8a51-b369-4e61-9931-c580956c5b2e

Just a small fix: this crosss bar should be uniform.. why we replaced it with purple cross with alignment in down

[code-par-learn]

Screen.Recording.2024-07-23.at.9.32.24.PM.mp4 Just a small fix: this crosss bar should be uniform.. why we replaced it with purple cross with alignment in down

i did it coz u see that when user logs in we display their name in the header with that , the cross in the header becomes very small and i thought it was not a good ux , it'll be hard to use that's why i added the cross btn separately below to enhance the ux

[anmode]

Screen.Recording.2024-07-23.at.9.32.24.PM.mp4 Just a small fix: this crosss bar should be uniform.. why we replaced it with purple cross with alignment in down

i did it coz u see that when user logs in we display their name in the header with that , the cross in the header becomes very small and i thought it was not a good ux , it'll be hard to use that's why i added the cross btn separately below to enhance the ux

Agreed! Fine, then could you do this will all screen sizes just to have continuity of design?

[anmode]

I think the chat box.. our message should be on right..? ok let's plan to re-create the chatbox, integrating AI to it.. let's plan to take this change a step further.

[anmode]

I'll create a requirement Doc on the support chat. Like how we can enhance it functionality-wise and UI-wise. by today EOD

[code-par-learn]

I'll create a requirement Doc on the support chat. Like how we can enhance it functionality-wise and UI-wise. by today EOD

sure Anmol

[anmode]

Some last UI fix:

1. The alignment of the message that the user sends should be on the right.
2. Provide some dark color or may be a shadow effect to the header and footer (where we write the message) so it will be distinguishable with the chat window.

[code-par-learn]

Some last UI fix:

1. The alignment of the message that the user sends should be on the right.
2. Provide some dark color or may be a shadow effect to the header and footer (where we write the message) so it will be distinguishable with the chat window.

@anmode just pushed the commit , take a look

[code-par-learn]

i removed the comments anmol

[anmode]

Congrats @code-par-learn on your first PR 🚀