fix(web): Horizontal Scrolling issue on the website

[Samaresh-Das]

User description

Description

The website had a horizontal scroll bar when changing to different screen sizes. The tailwind breakpoints were not used properly in my opinion. So I added some more breakpoints so it becomes more responsive as some cards in the page are pushing the beyond the View port. There were two options, either tweak the width of the cards or change the grid layout. Changing the width of the cards making elements look bad in other sections of the page and is overall not a good idea as card is a reusable component. So I changed the parent container div layout. On desktop screen it will be 3, on tablet size it will be 2. I didn't touched the mobile responsive design.

Video-

Recording.2024-09-17.1629061.mp4

Fixes #437

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.

---

PR Type

enhancement

---

Description

• Enhanced the grid layout across multiple components to address horizontal scrolling issues and improve responsiveness.
• Adjusted grid columns for different screen sizes, ensuring better layout on desktop, tablet, and mobile devices.
• Added conditional rendering in LifeEasySection to optimize display based on screen size.

---

Changes walkthrough 📝

Relevant files

Enhancement

index.tsx Update grid layout for responsive design                                  apps/web/src/components/colabEasy/index.tsx Modified grid layout to improve responsiveness. Adjusted grid columns for different screen sizes. +1/-1      index.tsx Enhance grid layout for better responsiveness                        apps/web/src/components/lifeEasySection/index.tsx Changed grid layout to improve responsiveness. Added conditional rendering for different screen sizes. +26/-2    index.tsx Improve grid layout for responsive design                                apps/web/src/components/secretSection/index.tsx Updated grid layout for improved responsiveness. Adjusted grid columns for various screen sizes. +1/-1

---

💡 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 Reviewer Guide 🔍

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review Code Duplication The component for 'Command Line Interface' and 'Snapshot' is duplicated for different screen sizes. Consider refactoring to avoid repetition.

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Category	Suggestion	Score
Performance	Extract card rendering logic into a memoized component to optimize performance To improve performance and avoid unnecessary re-renders, consider extracting the card rendering logic into a separate component and memoizing it. This is especially useful if the cardData array is large or frequently updated. apps/web/src/components/secretSection/index.tsx [63-67] +const SecretCard = React.memo(({ heading, description, svg }) => ( + <Card> + {svg} + <div className="p-6"> + <h3 className="text-lg font-medium">{heading}</h3> + <span className="text-base text-[#9394A1]">{description}</span> + </div> + </Card> +)); + <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:gap-9"> - {cardData.map((card, index) => { - const { heading, description, svg } = card - return ( - // eslint-disable-next-line react/no-array-index-key -- safe - <Card key={index}> - {svg} - <div className="p-6"> - <h3 className="text-lg font-medium">{heading}</h3> - <span className="text-base text-[#9394A1]">{description}</span> - </div> - </Card> - ) - })} + {cardData.map((card, index) => ( + <SecretCard key={card.heading} {...card} /> + ))} </div> Apply this suggestion Suggestion importance[1-10]: 9 Why: Extracting the card rendering logic into a memoized component is a strong suggestion for optimizing performance, especially if cardData is large or frequently updated. This change can significantly reduce unnecessary re-renders, improving the application's efficiency.	9
Maintainability	Refactor the component to use a single set of card components with responsive classes to reduce code duplication Instead of duplicating the card components for different screen sizes, consider using a single set of components with responsive classes. This approach reduces code duplication and improves maintainability. apps/web/src/components/lifeEasySection/index.tsx [25-107] <div className="grid gap-9 md:grid-cols-2 xl:grid-cols-3"> - <div className="grid gap-9"> - <Card> - <StandardKitSVG /> + {cards.map((card, index) => ( + <Card key={index} className={index > 0 ? 'hidden md:block' : ''}> + {card.svg} <div className="p-6"> - ... + <h3 className="text-lg font-medium">{card.title}</h3> + <span className="text-base text-[#9394A1]">{card.description}</span> </div> </Card> - ... - </div> - <div className="hidden md:grid xl:hidden"> - <Card> - ... - </Card> - </div> - <div className="hidden md:grid xl:hidden"> - <Card> - ... - </Card> - </div> + ))} </div> Suggestion importance[1-10]: 8 Why: This suggestion effectively reduces code duplication and enhances maintainability by using a single set of components with responsive classes. It addresses a significant issue in the code structure, making it more efficient and easier to manage.	8
Enhancement	Implement a more flexible and responsive grid layout using CSS Grid's auto-fit feature Consider using a more flexible grid system that adapts to different screen sizes without the need for multiple breakpoints. You could use CSS Grid's auto-fit or auto-fill with minmax() to create a responsive layout that automatically adjusts the number of columns based on available space. apps/web/src/components/colabEasy/index.tsx [25] -<div className="auto-cols-min gap-5 space-y-5 md:grid md:grid-cols-2 md:space-y-0 xl:grid-cols-3"> +<div className="grid gap-5 grid-cols-1 sm:grid-cols-auto-fit sm:grid-cols-[repeat(auto-fit,minmax(250px,1fr))]"> Apply this suggestion Suggestion importance[1-10]: 7 Why: The suggestion to use CSS Grid's auto-fit feature can improve the responsiveness and flexibility of the layout, reducing the need for multiple breakpoints. However, it is not a critical change and may require additional testing to ensure it behaves as expected across all screen sizes.	7

[rajdip-b]

@kriptonian1 could you review this and get it merged?

[kriptonian1]

LGTM

[m7md-Y-3mra]

Hi @rajdip-b
I wanted to bring to your attention a problem I’ve encountered related to the recent changes merged in this PR. There is a horizontal scrolling issue when the screen width is between 762px and 852px.

VID_._.mp4

[rajdip-b]

🎉 This PR is included in version 2.6.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀