updated botwidget responsiveness for all screentype

[itsdevansh5]

Related Issue(s)

• Fixes [Feature]: add responsiveness to AI bot for Mobile screens #366

Summary

Made the BotWidget component fully responsive across all screen sizes (smartphones, iPhones, tablets, laptops, and desktops) without disrupting the overall webpage layout. The bot widget now provides optimal user experience on all devices while maintaining functionality and visual appeal.

Changes

• Replaced JavaScript-based screen size calculations with Tailwind CSS responsive classes for better performance
• Implemented mobile-first responsive design approach with appropriate breakpoints
• Added responsive sizing for bot button (w-12 on mobile to w-24 on desktop)
• Made chat window dynamically sized (w-80 on mobile to w-[480px] on large screens)
• Implemented responsive text sizing (text-sm to text-base across breakpoints)
• Added responsive padding and spacing throughout the component
• Enhanced touch-friendly interactions for mobile devices
• Removed problematic global CSS that was affecting overall webpage responsiveness
• Maintained original webpage layout while making only bot-specific improvements

Screenshots (if applicable)

dsamate.mp4

How to Test

1. Open the application in a browser
2. Test the bot widget on different screen sizes (mobile: 375px, tablet: 768px, desktop: 1024px+)
3. Verify the bot button scales appropriately from 3rem on mobile to 6rem on desktop
4. Check that the chat window opens correctly and is properly sized on all devices
5. Test touch interactions on mobile devices to ensure button targets are appropriately sized
6. Verify that the overall webpage layout remains unchanged and responsive

Checklist

• I linked a related issue using Fixes #366
• I tested locally and verified the changes work as expected
• I updated docs or comments where needed

Note: Please ensure that appropriate labels (like gssoc25 and level labels) are assigned to the merged PR.
Sometimes it may be missed by PA or mentors, so kindly double-check — otherwise, points won't be counted.

[vercel]

@itsdevansh5 is attempting to deploy a commit to the saumyayadav213-gmailcom's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thanks for creating a PR for your Issue! ☺️

We'll review it as soon as possible.
In the meantime, please double-check the file changes and ensure that all commits are accurate.

If there are any unresolved review comments, feel free to resolve them. 🙌🏼

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
dsamatetemplate	Ready	Preview	Comment	Sep 27, 2025 1:05pm

[saumyayadav25]

1. The bot icon is too small inside circle in both screens.
2. In laptop, the button itself is too large.
3. icon is not visible in phone dimensions.

[itsdevansh5]

I hope thats ok now