fix: improve general responsiveness of the Highlights page

[Shivam7-1]

Description

This modification will ensure that the content inside the HighlightsFilterCard component is contained within an overflow container that allows horizontal scrolling when necessary and limits the maximum width to prevent overflow.

It will solve the General responsiveness of the Highlights page

What type of PR is this? (check all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation Update
• 🎨 Style
• 🧑‍💻 Code Refactor
• 🔥 Performance Improvements
• ✅ Test
• 🤖 Build
• 🔁 CI
• 📦 Chore (Release)
• ⏩ Revert

Related Tickets & Documents

Fixes #1336

Mobile & Desktop Screenshots/Recordings

Added tests?

• 👍 yes
• 🙅 no, because they aren't needed
• 🙋 no, because I need help

Added to documentation?

• 📜 README.md
• 📓 docs.opensauced.pizza
• 🍕 dev.to/opensauced
• 📕 storybook
• 🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

7da9b438-1f16-4c87-8e70-9d525dccd390.mp4

[netlify]

✅ Deploy Preview for oss-insights ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	540d711
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/64b25adfe28d490008644b71
😎 Deploy Preview	https://deploy-preview-1361--oss-insights.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.

[netlify]

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	540d711
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/64b25adf8411a60008983bd8
😎 Deploy Preview	https://deploy-preview-1361--design-insights.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]

PR Compliance Checks Passed!

[takanome-dev]

Hey @Shivam7-1, is this pr ready for review? I can still see the issue 👀

Let us know if you need any help 🙂

[Shivam7-1]

Hey @Shivam7-1, is this pr ready for review? I can still see the issue eyes

Let us know if you need any help slightly_smiling_face

Hii PR is ready for review from my end.
Can I just get to know what issue is getting now as I attached End output of Code change

[babblebey]

Hii PR is ready for review from my end. Can I just get to know what issue is getting now as I attached End output of Code change

Hi @Shivam7-1, nothing has changed in with your PR though.

Our expectation is stated below.

• Avoid Horizontal Scroll Completely (This isn't good for mobile)
• Hide Necessary components i.e. UserCard and HighlightsFilterCard at more appropriate breakpoints till you're left with only the Highlight Input Form and Highlights Lists as you scale down screen-size.

See #1336 (comment) as reference to better understand responsiveness.

Do let us know if you need help or more clarity to implement this

[bdougie]

I think the ipad mini still presents an issue. Perhaps we remove right sidebar on anything that is not full width screen?

[brandonroberts]

@Shivam7-1 are you still up for working on this PR?

[Shivam7-1]

@Shivam7-1 are you still up for working on this PR?

Hii I had Tried but haven't able to get expected result anyone else can good to go for this issue

[brandonroberts]

@Shivam7-1 no worries. Will close this one for now