Improved PlayHeader(#1562)

[joshua-jinu]

First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

Fixes #1562

• Added max-width for the description.
• Implemented collapse button using useState and useContext to display only the relevant information.

Type of change

Please delete options that are not relevant.

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Ran the code locally on my system, manual testing. Checked for functionality and responsiveness across different windows and pages. Ran linter to check for any lint issues.

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

Screenshots or example output

[netlify]

✅ Deploy Preview for reactplayio ready!

Name	Link
🔨 Latest commit	d857b6a
🔍 Latest deploy log	https://app.netlify.com/sites/reactplayio/deploys/67266833694bee0008ef97b7
😎 Deploy Preview	https://deploy-preview-1568--reactplayio.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Hey! contributor, thank you for opening a Pull Request 🎉.

@reactplay/maintainers will review your submission soon and give you helpful feedback. If you're interested in continuing your contributions to open source and want to be a part of a welcoming and fantastic community, we invite you to join our ReactPlay Discord Community.
Show your support by starring ⭐ this repository. Thank you and we appreciate your contribution to open source!
Stale Marking : After 30 days of inactivity this issue/PR will be marked as stale issue/PR and it will be closed and locked in 7 days if no further activity occurs.

[priyankarpal]

@joshua-jinu Can we enhance the button?

Implemented collapse button using useState and useContext to display only the relevant information.

[joshua-jinu]

Sure, any suggestions you have in mind?

@joshua-jinu Can we enhance the button?

Implemented collapse button using useState and useContext to display only the relevant information.

[priyankarpal]

Sure, any suggestions you have in mind?

@joshua-jinu Can we enhance the button?

Implemented collapse button using useState and useContext to display only the relevant information.

I have one idea: a black border without a black background. Let's see if this works; if not, we'll use the first one.

[joshua-jinu]

Done @priyankarpal, do check it out and let me know of any required changes

[priyankarpal]

Looks Good 🎉