fix: infinite scroll in meshery page#7259
fix: infinite scroll in meshery page#7259Rajesh-Nagarajan-11 merged 15 commits intolayer5io:masterfrom
Conversation
Signed-off-by: saurabhraghuvanshii <saurabhsraghuvanshi@gmail.com>
|
🚀 Preview for commit dc256e4 at: https://693863da402cdc88046be2c9--layer5.netlify.app |
Signed-off-by: saurabhraghuvanshii <saurabhsraghuvanshi@gmail.com>
|
🚀 Preview for commit 82b47de at: https://69386904eed5930a42469f38--layer5.netlify.app |
Signed-off-by: saurabhraghuvanshii <saurabhsraghuvanshi@gmail.com>
|
🚀 Preview for commit 0ec0982 at: https://6938740e4efe47214abe8153--layer5.netlify.app |
|
🚀 Preview for commit ef7c3fd at: https://6938788d61c57b1f3bd9cbd3--layer5.netlify.app |
Signed-off-by: saurabhraghuvanshii <saurabhsraghuvanshi@gmail.com>
|
🚀 Preview for commit a141823 at: https://69387d145c8b693ead10ade5--layer5.netlify.app |
Signed-off-by: saurabhraghuvanshii <saurabhsraghuvanshi@gmail.com>
|
🚀 Preview for commit 8295915 at: https://6938819aed523949ef51088e--layer5.netlify.app |
src/sections/Meshery/Features-section/features-section.style.js
Outdated
Show resolved
Hide resolved
Signed-off-by: saurabhraghuvanshii <saurabhsraghuvanshi@gmail.com>
Signed-off-by: saurabhraghuvanshii <saurabhsraghuvanshi@gmail.com>
|
🚀 Preview for commit cbf26a6 at: https://69388f1361c57b5c42d9bdef--layer5.netlify.app |
Signed-off-by: saurabhraghuvanshii <saurabhsraghuvanshi@gmail.com>
Signed-off-by: saurabhraghuvanshii <saurabhsraghuvanshi@gmail.com>
|
🚀 Preview for commit 95f06d1 at: https://693895b682b9f87d7a096749--layer5.netlify.app |
Signed-off-by: saurabhraghuvanshii <saurabhsraghuvanshi@gmail.com>
|
🚀 Preview for commit 69f3985 at: https://69389af461c57b7ccdd9bd1b--layer5.netlify.app |
|
🚀 Preview for commit d6f4cc0 at: https://69389f1282b9f8981a096684--layer5.netlify.app |
|
🚀 Preview for commit 000a7e7 at: https://6938a2fe5c8b69a42b10adfc--layer5.netlify.app |
|
Root cause is vertical carousel + missing flex wrapper resulted in production miscalculating height as infinite. |
|
🚀 Preview for commit 17286b8 at: https://693b08a8be4ac9ed296332e3--layer5.netlify.app |
|
@saurabhraghuvanshii |
Rajesh-Nagarajan-11
left a comment
There was a problem hiding this comment.
LGTM @saurabhraghuvanshii Thanks
There was a problem hiding this comment.
Pull request overview
This PR addresses an infinite scroll issue on the Meshery page by adding CSS constraints and layout properties to prevent overflow issues. The changes focus on controlling the width, height, and containment behavior of the main Meshery wrapper and the Features section.
Key Changes:
- Added flexbox layout properties to the main Meshery wrapper to constrain content flow
- Introduced CSS containment, isolation, and explicit dimension properties to the Features section
- Applied hard-coded height constraints to carousel elements to prevent expansion
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
src/sections/Meshery/meshery.style.js |
Added flexbox layout (display: flex, flex-direction: column) and width: 100% to the main wrapper to establish proper content flow |
src/sections/Meshery/Features-section/features-section.style.js |
Added multiple CSS properties including containment (contain: layout style paint), isolation, width/height constraints, overflow control, and hard-coded carousel heights to prevent infinite scrolling |
Description
This PR fixes #
Notes for Reviewers
Signed commits