[Meshery] Fix landing page blank overlay on scroll and carousel layout(#7889) - #7898
[Meshery] Fix landing page blank overlay on scroll and carousel layout(#7889)#7898superezzdev wants to merge 4 commits into
Conversation
…io#7889) Signed-off-by: GitHub <noreply@github.com>
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Fixes the Meshery landing page scroll artifact (blank/black overlay) by removing problematic CSS containment/skew styles and updating the Features section/carousel layout styles.
Changes:
- Removed
transform: skew()andcontain: layout style paintfromFeaturesSectionWrapperto prevent overlay artifacts while scrolling. - Updated spacing and “skew” layout elements (rectangles/top offset) to better align the section without transforms.
- Reworked carousel sizing and dot navigation positioning, including a new responsive dot layout at
<992px.
📝 WalkthroughWalkthroughThe Meshery features section CSS changes the layout from skewed to rectangular, retunes decorative elements and typography, revises carousel sizing and dot placement across breakpoints, and adjusts management button alignment and sizing. ChangesMeshery features section
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested labels: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/sections/Meshery/Features-section/features-section.style.jsParsing error: [BABEL] /src/sections/Meshery/Features-section/features-section.style.js: Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/sections/Meshery/Features-section/features-section.style.js`:
- Around line 139-168: Update the .slick-dots controls in the features-section
styles to provide a clear :focus-visible indicator for the keyboard-focusable
dot buttons, such as an accessible outline around the focused thumbnail. Keep
the existing opacity and active-state styling unchanged, and target the actual
button focus element rather than only the surrounding li.
- Around line 200-213: Update the responsive `.smp-section-carousel .slick-dots`
styling so dots remain within the viewport from 993px through approximately
1264px; either raise the existing `@media` breakpoint beyond that range or
replace the desktop negative `right` offset with an in-container position and
sufficient padding. Preserve the centered mobile layout and avoid horizontal
overflow.
- Around line 129-136: Update the .slick-slide img styling in
features-section.style.js to reserve the raw carousel image’s layout space
before it loads by adding an explicit aspect-ratio or width consistent with the
StaticImage slides. Preserve the existing max-height, auto width, centering, and
border-radius behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: a83e871b-aa90-46b8-b990-e75c529d9684
📒 Files selected for processing (1)
src/sections/Meshery/Features-section/features-section.style.js
|
Hi @Maanvi212006, |
|
@superezzdev Keep in mind that in order to improve your code pull request, you must address all bot comments by accepting them with new changes or rejecting them. In both the cases, justify your choice by commenting below that review. Repeat this cycle until zero unresolved comments remain so your code is ready for human review. |
|
Hi @Maanvi212006, |
rishiraj38
left a comment
rishiraj38
left a comment
There was a problem hiding this comment.
Please revert the lint changes. They're making it difficult to review the actual changes in this PR.
|
Hi @rishiraj38 , |
|
Hi @Maanvi212006 @rishiraj38 |
Signed-off-by: GitHub <noreply@github.com>
superezzdev
left a comment
superezzdev
left a comment
There was a problem hiding this comment.
I have reverted the linting and indentation changes so the diff only contains the minimal CSS bug fixes. Thank you for catching that!"
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/sections/Meshery/Features-section/features-section.style.js`:
- Around line 182-297: Remove the mobile-specific left offsets from the
.slick-dots rules in the max-width: 700px and max-width: 500px media queries.
Preserve the centering behavior established by the max-width: 1200px rule, while
retaining the existing width, image sizing, and top adjustment.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 14c334c4-f715-405c-a255-d866f9fa1d7b
📒 Files selected for processing (1)
src/sections/Meshery/Features-section/features-section.style.js
Signed-off-by: GitHub <noreply@github.com>
superezzdev
left a comment
superezzdev
left a comment
There was a problem hiding this comment.
"Accepted. Removed stale left: 90% and left: 85% offsets from the 700px and 500px media queries so .slick-dots remains properly centered without mobile clipping."
|
@superezzdev hi! thanks for solving the black overlay problem! 👏 One small suggestion: the |
|
Another minor point for consideration is that the same selector chain is used again and again in several media queries. This is fine but nesting can be simplified in order to decrease the amount of code. |
…ot controls Signed-off-by: GitHub <noreply@github.com>
superezzdev
left a comment
superezzdev
left a comment
There was a problem hiding this comment.
Hi @AnkitRewar11 ,
Thanks for the great feedback! I have removed the extra width and top properties from the mobile media queries so .slick-dots stays perfectly centered on all mobile viewports. I also refactored the media queries by nesting them directly within their respective styled components selectors to keep the code clean and reduce duplication. Appreciate your review!
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/sections/Meshery/Features-section/features-section.style.js (1)
194-220: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winRemove the fixed
left: 40remoffset from.slick-dots.
Atmax-width: 1600px, that absolute offset pushes the 6rem dot column past the 8-column carousel as the section narrows, and.smp-section { overflow: hidden; }clips part of the navigation on mid-size desktops. Anchor it to the slider edge instead.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/sections/Meshery/Features-section/features-section.style.js` around lines 194 - 220, Update the `.slick-dots` responsive rule at `max-width: 1600px` to remove the fixed `left: 40rem` offset and anchor the dot column to the slider edge using the existing right-side positioning. Preserve the `width: 6rem` setting and the separate mobile layout under `max-width: 1200px`.
🧹 Nitpick comments (1)
src/sections/Meshery/Features-section/features-section.style.js (1)
111-233: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winConsider consolidating the repeated
max-width: 1200px(and other) media queries.The same breakpoints (
1200pxat lines 13, 111, 128, 151, 177, 209, 229;992pxat 283, 292) are re-declared across many nested selectors. This matches a reviewer suggestion noted in the PR discussion to simplify repeated selector chains across media queries. Consider a shared mixin/breakpoint constant (or styled-components theme breakpoints) to reduce duplication and ease future maintenance.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/sections/Meshery/Features-section/features-section.style.js` around lines 111 - 233, Consolidate the repeated responsive breakpoints used throughout the features-section styles, especially the 1200px and 992px media queries, by introducing and reusing the project’s established breakpoint mixin or shared breakpoint constants. Update the affected nested selectors, including .smp-section-data, .slick-list, carousel images, and .slick-dots, without changing their existing responsive behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@src/sections/Meshery/Features-section/features-section.style.js`:
- Around line 194-220: Update the `.slick-dots` responsive rule at `max-width:
1600px` to remove the fixed `left: 40rem` offset and anchor the dot column to
the slider edge using the existing right-side positioning. Preserve the `width:
6rem` setting and the separate mobile layout under `max-width: 1200px`.
---
Nitpick comments:
In `@src/sections/Meshery/Features-section/features-section.style.js`:
- Around line 111-233: Consolidate the repeated responsive breakpoints used
throughout the features-section styles, especially the 1200px and 992px media
queries, by introducing and reusing the project’s established breakpoint mixin
or shared breakpoint constants. Update the affected nested selectors, including
.smp-section-data, .slick-list, carousel images, and .slick-dots, without
changing their existing responsive behavior.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 084bf3f4-598f-4151-b051-747639d96fd2
📒 Files selected for processing (1)
src/sections/Meshery/Features-section/features-section.style.js
|
Thank you for taking care of the feedback, @superezzdev! Your changes seem great, and the design is definitely more polished now on mobile. LGTM from my side. Can you please provide updated screenshots for both desktop and mobile views? |
|
Hi @AnkitRewar11 , Desktop |
|
Nice work! You did a great job. Thanks for working on this. |
There was a problem hiding this comment.
Nice fix @superezzdev But found a regression: on viewport widths in roughly the 700px–1200px range (tested at iPad Air, 820×1180), the Kanvas video/demo image don't render. Works fine at mobile (~430px) and desktop widths. Once confirm from you end too
Description
This PR fixes #7889
transform: skew()andcontain: layout style paintproperties fromFeaturesSectionWrapperthat caused a large blank black overlay to cover content during page scroll.Before
After
Notes for Reviewers
gatsby developacross Chrome, Safari, and Brave in both light and dark themes./cloud-native-management/meshery).Signed commits
Summary by CodeRabbit