fixed unresponsive overlay cards in info.tsx

[TanmayBansa1]

---

name: Fixed unresponsive overlay cards in info.tsx
about: I have fixed the unresponsive nature of the overlay cards in the info.tsx component

Description

The aforementioned overlay cards are not responsive currently, this PR fixed that, adds a useEffect hook to keep track of the windowWidth and conditionally renders the cards perfectly according to various breakpoints.

before

before.mp4

after

after.-.Made.with.Clipchamp.mp4

Related Issue

This PR fixes the unresponsive part in #40

Changes Made

• Change 1 -> Added a useEffect hook to keep track of the windowWidth
• Change 2 -> Conditionally rendered the overlay cards
• Change 3 -> Above 355px, renders the whole card, above 270px renders just the heading withing the card, below 270px doesnt render the card

Testing Performed

• Tested locally on the browser and validated the behaviour using the browser devtools.
• Tested on Edge, Chrome, Arc and Brave browsers.
• Tested with npm run lint:ts
• Tested with npm run format:file src/components/info.tsx
• Tested with npm run build

Checklist

• I have tested these changes locally and they work as expected.
• I have added/updated tests that prove the effectiveness of these changes.
• I have updated the documentation to reflect these changes, if applicable.
• I have followed the project's coding style guidelines.
• I have addressed the code review feedback from the previous submission, if applicable.

Thank you for contributing to our project! We appreciate your help in improving it.

📚 See contributing instructions.

🙋🏾🙋🏼 Questions: Community Matrix Server.

[TanmayBansa1]

@sa-fw-an please review this