modified: src/components/TweetCarousael/index.jsx

[theunhackable]

solved issue #761

Fixes Issue

This PR fixes the following issues:

closes #761

Changes proposed

the better-react-carousel contains responsiveLayout prop which is used to make the carousel responsive. I used this to fix the issue

Reference:

Responsive Layout attribute in better-react-carousel

I thought that a div wrapper would be better to manage Tweet component as it gives more flexibility to modify the width using TailwindCSS classes. So I have added a div wrapper around Tweet component which helps to tweak width property directly.

Also I have added an extra break point in TailwindCSS xsm of 370px which can be used for smaller devices.

Here comes all the changes proposed through this PR

Check List (Check all the boxes which are applicable)

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• All new and existing tests passed.
• This PR does not contain plagiarized content.
• The title of my pull request is a short description of the requested changes.

Screenshots

This is screen shot after the problem is fixed
[fixed given problem]

Add all the screenshots which support your changes

Observations

I observed that this problem occours in small devices when we change size of the window using console tool. But once we refresh the website the Tweet components adjusted themselves. I don't this this would be a major problem as mostly small devices are used in potrait mode.

Before Refresh: 👇

After Refresh : 👇

Summary by CodeRabbit

• New Feature: Enhanced the TweetCarousel component with responsive layout support. Users can now enjoy a visually appealing and adaptive tweet carousel across various screen sizes.
• Chore: Added a new screen size breakpoint "xsm" in the Tailwind CSS configuration. This will facilitate better responsiveness for smaller devices.

[coderabbitai]

Walkthrough

This update introduces responsive layout support to the TweetCarousel component and adds a new screen size breakpoint in the Tailwind CSS configuration. The changes enhance the visual presentation and adaptability of the tweet carousel across different screen sizes.

Changes

File	Summary
src/components/TweetCarousael/index.jsx	Introduced responsive layout support to the TweetCarousel component. Added a responsiveLayout prop that accepts an array of breakpoints and corresponding column and gap values.
tailwind.config.js	Added a new screen size breakpoint "xsm" with a value of '370px' in the screens section.

🐇💻

In the land of code, where the brackets lie,

A carousel of tweets, now pleasing to the eye.

With responsiveness in mind, and screens of all size,

Our carousel adapts, a delightful surprise! 🎉

---

Tips

Chat with CodeRabbit Bot (@coderabbitai)

• Mention @coderabbitai in any review comment for bot assistance. The bot stays silent unless called upon.
• Note: Review comments are made on code diffs or files, not on the PR overview.

Pause Incremental Reviews

• Insert @coderabbitai: ignore in the PR description to halt the bot's ongoing reviews. Remove the line to resume.

[coderabbitai]

Review Status

Actionable comments generated: 0

Commits

Files that changed from the base of the PR and between 6625b00 and 5d8e336 commits.

Files selected for processing (2)

• src/components/TweetCarousael/index.jsx (1 hunks)
• tailwind.config.js (1 hunks)

Files skipped from review due to trivial changes (2)

• src/components/TweetCarousael/index.jsx
• tailwind.config.js

[github-actions]

Woah! This is your first Pull Request in our community, Congratulations 🎉 and thank you for your contribution! 🚀 The team will review it on availability 💫. In the meantime join our Discord server and checkout our YouTube channel.

[Chandraprakash-Darji]

@theunhackable Nice work,

Thanks for the contribution

[theunhackable]

@Chandraprakash-Darji Should I close tis now>? This is my first contribution. I don't know what to do

[Chandraprakash-Darji]

@theunhackable Now I will merge it, and your code will be merged in main branch