fix: improve general responsiveness of the Highlights page

[Shivam7-1]

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

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.

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?

[netlify]

✅ Deploy Preview for oss-insights ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	9ccdd6b
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/64b2584416bfe60008808ae5
😎 Deploy Preview	https://deploy-preview-1340--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	9ccdd6b
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/64b25844729ab0000805f77e
😎 Deploy Preview	https://deploy-preview-1340--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!

[NsdHSO]

Hi @Shivam7-1 welcome to the community, could you check this specs, your title should be fix: general responsiveness of the highlights page, Tnx again for your PR.

[babblebey]

Hi @Shivam7-1, while you try to correct the PR title as stated by @NsdHSO, do add a before and after screenshots or screencast/video that demos the solution.

[Shivam7-1]

Hi @babblebey , I was trying to run project locally but I wasn't able to run it locally and I also tried vs code but getting npm error can you please give me detailed steps should I perform to run project local system so that I can create Screen Recording

[babblebey]

Hey @Shivam7-1

I will assume you already have fork of the repo on your profile and it's cloned on your computer.

Start by Updating this branch in your fork, and re-pull it onto your computer.

Hint

git pull

Then Follow the steps below.

• Open the project i.e. 'insights' in VSCode
• Look for the node_modules folder, if you find it within your folder structure, delete it, if you cannot find it, ignore this step.
• Open a new Terminal from VSCode 'Terminal' menu
• Run the command npm ci and wait for the process to complete.
• Then Run npm run dev

That should be everything.

Kindly Note: This Instruction assumes you already have NodeJS installed on your computer. If not, download NodeJS.

[Shivam7-1]

Hey @Shivam7-1

I will assume you already have fork of the repo on your profile and it's cloned on your computer.

Start by Updating this branch in your fork, and re-pull it onto your computer.

Hint
git pull

Then Follow the steps below.

• Open the project i.e. 'insights' in VSCode
• Look for the node_modules folder, if you find it within your folder structure, delete it, if you cannot find it, ignore this step.
• Open a new Terminal from VSCode 'Terminal' menu
• Run the command npm ci and wait for the process to complete.
• Then Run npm run dev

That should be everything.

Kindly Note: This Instruction assumes you already have NodeJS installed on your computer. If not, download NodeJS.

Hii @babblebey I had Tryied above steps but i encountered Error After Performing npm ci Command and Then i am getting This Error

Is There any solution Could you Recommend to Resolve above Error

[bdougie]

@Shivam7-1 what node version are you running. Can you share more details about your environment?

[Shivam7-1]

@Shivam7-1 what node version are you running. Can you share more details about your environment?

Hii I am using VS Code editor and Node.js Latest LTS Version: 18.16.1

[bdougie]

Linux?

[Shivam7-1]

Linux?

Windows 11

[brandonroberts]

@Shivam7-1 run npm run format to apply formatting and fix the merge conflict. You can push that up to fix the PR preview while getting your environment issues figured out

[Shivam7-1]

Hey @Shivam7-1

I will assume you already have fork of the repo on your profile and it's cloned on your computer.

Start by Updating this branch in your fork, and re-pull it onto your computer.

Hint
git pull

Then Follow the steps below.

• Open the project i.e. 'insights' in VSCode
• Look for the node_modules folder, if you find it within your folder structure, delete it, if you cannot find it, ignore this step.
• Open a new Terminal from VSCode 'Terminal' menu
• Run the command npm ci and wait for the process to complete.
• Then Run npm run dev

That should be everything.

Kindly Note: This Instruction assumes you already have NodeJS installed on your computer. If not, download NodeJS.

Hii I had Try after Re-install node.js again But Now i am getting this error I had attached Screen Recording of Error
PS C:\Users\user\Downloads\insights-beta\insights-beta> npm ci npm info using [email protected] npm info using [email protected] npm WARN cleanup Failed to remove some directories [ npm WARN cleanup [ npm WARN cleanup 'C:\\Users\\user\\Downloads\\insights-beta\\insights-beta\\node_modules\\@cspotcode', npm WARN cleanup [Error: EPERM: operation not permitted, rmdir 'C:\Users\user\Downloads\insights-beta\insights-beta\node_modules\@cspotcode'] { npm WARN cleanup errno: -4048, npm WARN cleanup code: 'EPERM', npm WARN cleanup syscall: 'rmdir', npm WARN cleanup path: 'C:\\Users\\user\\Downloads\\insights-beta\\insights-beta\\node_modules\\@cspotcode' npm WARN cleanup } npm WARN cleanup ] npm WARN cleanup ] npm ERR! code ETIMEDOUT npm ERR! syscall connect npm ERR! errno ETIMEDOUT npm ERR! network request to https://registry.yarnpkg.com/zustand/-/zustand-4.3.2.tgz failed, reason: connect ETIMEDOUT 2606:4700::6810:1b23:443 npm ERR! network This is a problem related to network connectivity. npm ERR! network In most cases you are behind a proxy or have bad network settings. npm ERR! network npm ERR! network If you are behind a proxy, please make sure that the npm ERR! network 'proxy' config is set properly. See: 'npm help config'
https://github.com/open-sauced/insights/assets/55046031/8df91d69-ebec-4349-bed8-a1269fee6cdd

Can You please provide Solution if any

[babblebey]

Hii I had Try after Re-install node.js again But Now i am getting this error I had attached Screen Recording of Error PS C:\Users\user\Downloads\insights-beta\insights-beta> npm ci npm info using [email protected] npm info using [email protected] npm WARN cleanup Failed to remove some directories [ npm WARN cleanup [ npm WARN cleanup 'C:\\Users\\user\\Downloads\\insights-beta\\insights-beta\\node_modules\\@cspotcode', npm ERR! network This is a problem related to network connectivity. npm ERR! network In most cases you are behind a proxy or have bad network settings. npm ERR! network npm ERR! network If you are behind a proxy, please make sure that the npm ERR! network 'proxy' config is set properly. See: 'npm help config'

Can You please provide Solution if any

Hi @Shivam7-1

This error is as a result of your Internet connectivity, do try again with a stronger internet connection.

[Shivam7-1]

Hii @babblebey Thanks Now it worked and I am able to run locally
And I would like close this PR will Create New PR as I have old Codebase and above PR no need to merge

[babblebey]

Great stuff @Shivam7-1

Go on and do this! Do not forget to follow the current title structure when writing the title for your PR.

In fact, I'd suggest that you just copy and use the current PR title as is for the new PR.

Let's go ✊🏾

[Shivam7-1]

Great stuff @Shivam7-1

Go on and do this! Do not forget to follow the current title structure when writing the title for your PR.

In fact, I'd suggest that you just copy and use the current PR title as is for the new PR.

Let's go ✊🏾

Yes done here it is #1361