fix: opportunty card responsiveness

[upsaurav12]

Description

This PR fixes #5997.

Notes for Reviewers
I have add flex-wrap property for 1440px. I have also shrink the width of opporitunity-cards to avoid the space due to flex-wrap

Video

cinnamon-2024-11-15T1847020530.mp4

Signed commits

• Yes, I signed my commits.

[upsaurav12]

@vishalvivekm, I have used RowWrapper for this as it was discussed in last meet. Sorry i was not able to finish this due to exams.

[l5io]

🚀 Preview for commit 9dcf750 at: https://6737509357170daef02ac03e--layer5.netlify.app

[upsaurav12]

if i want to see if there is no other side effect how can i find that ??

[vishalvivekm]

@upsaurav12
Thank you for your contribution!
Let's discuss this during the website call on Monday at 6:30 PM IST

adding it as an agenda item to the meeting minutes.

[l5io]

🚀 Preview for commit db7adb4 at: https://673b35c58ca641119437f383--layer5.netlify.app

[l5io]

🚀 Preview for commit ce8c583 at: https://674da576a6b5e107d922b7ed--layer5.netlify.app

[upsaurav12]

@SAHU-01 @vishalvivekm i have made some changes in career/career-single/index.js file for this page https://layer5.io/careers/software-engineer. It was fixed through <Row> component by flex:wrap but it still had some issues like alignment. so i just changed breakpoints from 767px tp 1200px..
Is approach should be a correct approach?

[l5io]

🚀 Preview for commit 5d791d4 at: https://67512d916e19bba79409ca69--layer5.netlify.app

[leecalcote]

@mdkaifansari04 will you give this a review?

[leecalcote]

merge conflicts...

[l5io]

🚀 Preview for commit d006c2b at: https://675c6b0f28119a48dc77104a--layer5.netlify.app

[mdkaifansari04]

Instead of having a fix width, it better practice to with max-width that would manage the card size even in below the specified screen sizes.

[mdkaifansari04]

adding a perfect max-wdith would get adjusted when screen size is changed, it automatically get adjusted. You can set one by trying different values.

[mdkaifansari04]

Else it is fine, just check if it can be done more better way using best practices

[upsaurav12]

@mdkaifansari04 thank you for suggestions.
There are many <Row> components that have responsive issue, but i am not sure whether it is related to<Row> component or they can be solve individually.

[mdkaifansari04]

You can try debugging it, also if you wanted to know more about Row component you should look into Sistent repo.

If it has some predefined styles, try updating it or try passing styles directly into Row component. (If required)