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.

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

Checklist

Please tick the relevant options.

• 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.
• 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:

[kartikayasija]

Recording.2023-07-01.222041.mp4

Reverse the direction of animation.

[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