Improve mobile pricing table usability#7736
Conversation
Signed-off-by: Yash Patel <patelyash142007@gmail.com>
|
Preview deployment for PR #7736 removed. This PR preview was automatically pruned because we keep only the 6 most recently updated previews on GitHub Pages to stay within deployment size limits. If needed, push a new commit to this PR to generate a fresh preview. |
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>
Rajesh-Nagarajan-11
left a comment
Rajesh-Nagarajan-11
left a comment
There was a problem hiding this comment.
Issue is not about mobile responsiveness , its about making the header sticky
|
🚨 Alert! Git Police! We couldn’t help but notice that one or more of your commits is missing a sign-off. A what? A commit sign-off (your email address). To amend the commits in this PR with your signoff using the instructions provided in the DCO check. To configure your dev environment to automatically signoff on your commits in the future, see these instructions.
|
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)