Responsiveness chatbot UI for mobile #442

[soubhik-111]

Summary

The Issue is already listed in #442 with proper screenshots and captions.

Fixes # (issue)

Chatbot is breaking in the case of the mobile view.

Type of change

Please select the relevant option.

• [X] Bug fix
• [ ] New feature
• [X] Breaking change
• [ ] Documentation update
• [ ] Other (please describe)

Checklist

Please tick the relevant options.

• [X] My code follows the code style of this project.
• [ ] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.
• [ ] I have added tests to cover my changes.
• [X] All new and existing tests passed.

Screenshots

Provide screenshots to help explain your changes.

Before change:

It is breaking i.e. half the chatbot is not showing on mobile.

After change:

It is completely visible on all mobiles.

Additional context

Please review and give your feedback. Close #442 GSSOC'23

[kartikayasija]

Make it responsive for landscape view.

[soubhik-111]

@kartikayasija Thanks for your feedback have added it now. Kindly Review it.

Screenshot:

device: Samsung s20 ultra

Portait:

Landscape:

device: iphone13

Portrait:

Landscape:

[soubhik-111]

@kartikayasija Kindly review and merge it or give your feedback.

[soubhik-111]

@kartikayasija Kindly merge it under GSSOC'23

[soubhik-111]

@AbhiPatel10 Can you merge it