feat: Chat Window Positioning and Responsiveness

[enitrat]

Improve chat window positioning and responsiveness

Description 📹

The chat window currently uses fixed positioning with percentage-based width, which can cause issues on different screen sizes. The window needs better responsive behavior and smoother transitions. We could fix the window in the bottom-left of the screen, so that navigation is not impaired by the chat window.

Proposed Actions 🛠️

1. Fork and Create Branch:

   git checkout -b fix-chat-positioning

2. Implement Changes:

   • [ ] Update chat window positioning in theme/css/chat.css:

     
     #chat-window {
     position: fixed;
     bottom: 20px;  /* Change from top: 50% */
     right: 20px;   /* Change from left: 50% */
     transform: none; /* Remove transform */
     width: 400px;  /* Fixed width for larger screens */
     height: 600px; /* Fixed height for larger screens */
     max-width: calc(100vw - 40px); /* Responsive max-width */
     max-height: calc(100vh - 40px); /* Responsive max-height */
     }

   @media (max-width: 480px) {

   chat-window {

   width: 100%; height: 100%; bottom: 0; right: 0; border-radius: 0; } }

Any other changes that you deem necessary for the feature to work well.

3. Run Tests and Commit Changes

Visually test that your solution works.

Required 📋

To keep our workflow smooth, please make sure you follow these guidelines:

• Assignment: Don't create a pull request if you weren’t assigned to this issue.
• Timeframe: Complete the task within 3 business days.
• Closing the Issue: In your PR description, close the issue by writing Close #[issue_id].
• Review Process:
  • Once you've submitted your PR, change the label to "ready for review".
  • If changes are requested, address them and then update the label back to "ready for review" once done.
• Testing: Test your PR locally before pushing, and verify that tests and build are working after pushing.

Thank you for your contribution 🙏

⚠️ WARNING: Failure to follow the requirements above may result in being added to the OnlyDust blacklist, affecting your ability to receive future rewards.

[0xdevcollins]

Could I be assigned to this?

[ShantelPeters]

Can i please be assigned to this issue @enitrat