✨ [Feature request]: Improve PlayHeader

[Shivam-Katare]

Is your feature request related to a problem? Please describe.

1. When there is too much information in the play header, like long descriptions and not many tags, it becomes too large. The description stretches across the header, causing content to shift too far to the left. This creates layout problems where important elements, such as the dates are collapsing or overlapping.

2. When the play header contains too much information, such as tags and a lengthy description, the height of the header increases significantly. This reduces the available space for viewing the actual play content.

Describe the solution you'd like.

For the first issue, we could set a maximum width for the description area in the play header.

For the second issue, we could add a "Collapse" button that folds the entire play header, leaving only essential elements like the back button, title, and icons (like/edit/share). When clicked, the button would toggle the full header view, allowing users to expand or collapse it based on their preference, ensuring they can focus on the play content.

NOTE: Feel free to suggest any other ideas you believe are effective. The above solutions are just suggestions.

Describe alternatives you've considered.

No alternative.

Screenshot / Screenshare

No response

Additional context

No response

Record

• [X] I have checked the existing issues
• [X] I have read the Contributing Guidelines
• [ ] I want to work on this issue
• [X] I am a Hacktoberfest contributor

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[github-actions[bot]]

Hey! contributor, thank you for opening an Issue 🎉.

@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.

[mrhat05]

since the tags and date will occupy constant space we can fix its width and leave the description responsive also for second issue as you said collapse we implement it and also increase the necessary margin for good visibility

[priyankarpal]

since the tags and date will occupy constant space we can fix its width and leave the description responsive also for second issue as you said collapse we implement it and also increase the necessary margin for good visibility

do you want to work on it?

[joshua-jinu]

Hey @Shivam-Katare, I would like to work on this, can i be assigned

[priyankarpal]

Hey @Shivam-Katare, I would like to work on this, can i be assigned

assigned to you