fix(web): alignment issue in “Collaboration made easy” section

[PriyobrotoKar]

User description

Description

Fixed the issue where the “Approval before Commit” section was overflowing from the main grid.

Fixes #177

Dependencies

Mention any dependencies/packages used

Future Improvements

Mention any improvements to be done in future related to any file/feature

Mentions

Mention and tag the people

Screenshots of relevant screens

Add screenshots of relevant screens

Developer's checklist

• My PR follows the style guidelines of this project
• I have performed a self-check on my work

If changes are made in the code:

• I have followed the coding guidelines
• My changes in code generate no new warnings
• My changes are breaking another fix/feature of the project
• I have added test cases to show that my feature works
• I have added relevant screenshots in my PR
• There are no UI/UX issues

Documentation Update

• This PR requires an update to the documentation at docs.keyshade.xyz
• I have made the necessary updates to the documentation, or no documentation changes are required.

---

Type

enhancement, bug_fix

---

Description

• Improved the layout and responsiveness of the "Collaboration made easy" section by transitioning to a grid layout and adjusting card components for better alignment.
• Introduced the ability to add custom styling to Card components through a new className prop, enhancing flexibility and customization.

---

Changes walkthrough

Relevant files

Enhancement

index.tsx Improved Layout and Responsiveness in "Collaboration made easy" Section apps/web/src/components/colabEasy/index.tsx Changed the layout from flex to grid for better alignment and responsiveness. Adjusted the Card components to span multiple rows or columns as needed. Added className props to Card and FollowerPointerCard components for custom styling. +35/-39  index.tsx Added Custom Styling Capability to Card Component                apps/web/src/components/shared/card/index.tsx Introduced className prop to allow custom styling. Utilized cn utility function for conditional class name concatenation. +8/-2

---

✨ PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[codiumai-pr-agent-free]

PR Description updated to latest commit (3ae097e)

[codiumai-pr-agent-free]

PR Review

⏱️ Estimated effort to review [1-5]	2, because the changes are mostly related to CSS classes and structure adjustments in the React components. The logic seems straightforward, focusing on layout improvements and adding a className prop to the Card component for better customization.
🧪 Relevant tests	No
🔍 Possible issues	Styling Consistency: The introduction of className props to Card components might lead to inconsistent styling if not properly managed across the project.
	Grid Layout Responsiveness: The switch to a grid layout with hardcoded column spans (col-span-2, col-start-3 col-end-4) might cause responsiveness issues on different screen sizes if not thoroughly tested.
🔒 Security concerns	No

---

✨ Review tool usage guide:

---

Overview:
The review tool scans the PR code changes, and generates a PR review which includes several types of feedbacks, such as possible PR issues, security threats and relevant test in the PR. More feedbacks can be added by configuring the tool.

The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on any PR.

• When commenting, to edit configurations related to the review tool (pr_reviewer section), use the following template:

/review --pr_reviewer.some_config1=... --pr_reviewer.some_config2=...

• With a configuration file, use the following template:

[pr_reviewer]
some_config1=...
some_config2=...

See the review usage page for a comprehensive guide on using this tool.

[codiumai-pr-agent-free]

PR Code Suggestions

Category	Suggestions
Enhancement	Improve readability by using responsive classes directly. Consider using TailwindCSS's responsive classes for translate-x and py directly instead of conditional classes within className. This will improve readability and maintainability of your code. apps/web/src/components/colabEasy/index.tsx [42] -<CustomrollSVG className="w-[18rem] translate-x-[8vw] py-12 md:w-[21rem] md:translate-x-[4rem] md:py-0 md:pt-10" /> +<CustomrollSVG className="w-[18rem] md:w-[21rem] translate-x-[8vw] md:translate-x-[4rem] py-12 md:py-0 md:pt-10" />
	Allow dynamic sizing of the Card component via props. To enhance the flexibility of the Card component, consider allowing the width and height properties to be passed as props. This approach provides more control over the component's size without relying solely on conditional classes. apps/web/src/components/shared/card/index.tsx [18-19] +// Assuming width and height props are added and their types are string | undefined <div className={cn( - `flex ${widthFull ? 'w-[20rem] md:w-full' : 'w-[20rem] md:w-[25rem]'} h-full flex-col justify-end rounded-2xl backdrop-blur-2xl`, + `flex ${width ? width : 'w-[20rem]'} ${height ? height : 'h-full'} flex-col justify-end rounded-2xl backdrop-blur-2xl`, className )}
Best practice	Add explicit row-span values for grid consistency. To ensure consistency and avoid unexpected layout shifts, consider adding explicit row-span values for all Card components within the grid. This will help maintain a uniform appearance across different screen sizes. apps/web/src/components/colabEasy/index.tsx [26] <Card className="row-span-2"> +<Card className="row-span-1"> <!-- Example for other cards -->
Maintainability	Use a more descriptive boolean prop name for clarity. For better maintainability and to avoid potential future errors, consider using a more descriptive prop name than widthFull. A name like isFullWidth would more clearly convey that the prop is a boolean controlling whether the card should be full width. apps/web/src/components/shared/card/index.tsx [5] -widthFull?: boolean +isFullWidth?: boolean
Accessibility	Wrap Card components in tags for better accessibility. To improve the semantic structure and accessibility of your content, consider wrapping each Card component with an tag. This change would help screen readers and other assistive technologies understand and navigate the content more effectively. apps/web/src/components/colabEasy/index.tsx [26] -<Card className="row-span-2"> +<article> + <Card className="row-span-2"> + ... + </Card> +</article>

---

✨ Improve tool usage guide:

---

Overview:
The improve tool scans the PR code changes, and automatically generates suggestions for improving the PR code. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.

• When commenting, to edit configurations related to the improve tool (pr_code_suggestions section), use the following template:

/improve --pr_code_suggestions.some_config1=... --pr_code_suggestions.some_config2=...

• With a configuration file, use the following template:

[pr_code_suggestions]
some_config1=...
some_config2=...

See the improve usage page for a comprehensive guide on using this tool.

[kriptonian1]

@PriyobrotoKar can you add a screenshot

[PriyobrotoKar]

@PriyobrotoKar can you add a screenshot

Yes , here's the screenshot

[PriyobrotoKar]

@kriptonian1 I have found another way to fix this alignment issue by taking care of these possible issues mentioned in this PR Review.

Should I push this new fix or the previous fix was good enough?

This is how it looks after this new fix:

[rajdip-b]

@PriyobrotoKar we would be really glad if you can make those fixes!

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
No data about Duplication

See analysis details on SonarCloud

[rajdip-b]

@kriptonian1 can you drop in your reviews?

[kriptonian1]

LGTM

[rajdip-b]

@PriyobrotoKar Congrats on your first successful MR at keyshade!!

[PriyobrotoKar]

@PriyobrotoKar Congrats on your first successful MR at keyshade!!

Thanks!! Infact this is my first ever successful MR in any open source project. Will be trying to contribute more in future.

[rajdip-b]

Looking forward to it!

P.S. you can try a few API issues aswell!

[rajdip-b]

🎉 This PR is included in version 1.3.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀