Improve mobile pricing table usability#7736
Conversation
Signed-off-by: Yash Patel <patelyash142007@gmail.com>
|
🚀 Preview deployment: https://layer5.io/pr-preview/pr-7736/
|
rishiraj38
left a comment
rishiraj38
left a comment
There was a problem hiding this comment.
Please fix this; it shouldn’t be transparent.
|
Could you please refer to the current site? It seems like the pricing component doesn’t have a separate scrollable table. Instead, they move with the main page. Could you please move that component to the page scroll only until the table appears and then remove it? |
|
Actually, I’m facing issues while setting up the codebase locally. For now, I have only forked the src folder, made the required changes, and tested the code in a separate test folder. As soon as I’m able to set up the complete codebase locally, I’ll solve the issue properly. |
|
@WildTrio Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂 |
If you’re still not able to set it up locally, try using Codespaces instead (would recommend it only for these minor fixes). |
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Improves the mobile usability of the Pricing comparison table by enabling scrollable table layout, tightening spacing on smaller screens, and making the header row stick to the top while scrolling.
Changes:
- Adjusted the comparison table container to support scrolling with a capped viewport height.
- Added minimum table widths and mobile-specific padding/font sizing for better readability.
- Updated header styling to be sticky and more visually consistent during scroll.
| overflow-y: auto; | ||
| position: relative; | ||
| -webkit-overflow-scrolling: touch; | ||
| max-height: 80vh; | ||
| transition: 0.6s cubic-bezier(0.5, 1); |
| .price-table-head td { | ||
| position: sticky; | ||
| top: 0; | ||
| z-index: 20; | ||
| background-color:${props => props.theme.secondaryColor}; | ||
| color: #FFFFFF; |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Signed-off-by: Yash Patel <patelyash142007@gmail.com>
Description
This PR fixes #7665 by improving the Pricing section UI for mobile users. The changes ensure better visibility and alignment of feature checkmarks and improve the overall responsive layout experience.
Notes for Reviewers
[Signed commits](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md#signing-off-on-commits-developer-certificate-of-origin)