fix: prevent homepage hero preview image overflow on mid-range screens by tejaswiverma121-byte · Pull Request #8105 · layer5io/layer5

tejaswiverma121-byte · 2026-09-21T18:03:51Z

Fixes #8091

Description

This PR fixes #8091

Constrain ReactPlayer container to width 100% and maxWidth 100%
Add overflow hidden and flex centering to right-col
Set imgHero and vidHero to maintain responsive 16:9 aspect ratio
Remove obsolete fixed-height and offset transform from mobile query

Changes:

src/sections/Home/CloudNativeManagement/index.js:
- Updated ReactPlayer props to width="100%" with style={{ margin: "auto", maxWidth: "100%" }} so the player scales relative to its parent container rather than intrinsic asset width.
src/sections/Home/CloudNativeManagement/statement.style.js:
- Constrained .right-col with overflow: hidden, display: flex, align-items: center, and justify-content: center.
- Constrained .imgHero with display: block, width: 100%, max-width: 100%, and height: auto.
- Configured .vidHero with width: 100% !important, max-width: 100% !important, height: auto !important, and aspect-ratio: 16 / 9.
- Ensured .vidHero > div, .vidHero iframe, .vidHero video fill 100% of their container.
- Removed obsolete fixed-height (height: 25rem !important) and offset transform (transform: translate(0, -52%)) in the mobile breakpoint (max-width: 767px) to preserve natural 16:9 responsive scaling without layout overlapping.

Notes for Reviewers
Tested locally on Gatsby dev server across various breakpoints:

Mobile (375px width): Video stacks cleanly beneath text with correct 16:9 aspect ratio.
Desktop (1397px width): Media respects column boundaries with no horizontal scrollbar.

Screen.Recording.2026-09-22.at.12.21.08.PM.mov

Signed commits

Yes, I signed my commits.

Summary by CodeRabbit

Improvements
- Updated the Meshery hero video to fill the available width while maintaining a 16:9 aspect ratio across screen sizes.
- Refined hero media alignment and sizing, including full-width images and content centered within the media area.
- Removed fixed mobile video sizing and positioning in favor of responsive dimensions.
- Reformatted the descriptive text without changing its content.

coderabbitai · 2026-09-21T18:04:51Z

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: 913cc273-8e44-4802-9514-39caf5bf403c

📥 Commits

Reviewing files that changed from the base of the PR and between 6967bcb and 3ed70bb.

📒 Files selected for processing (1)

src/sections/Home/CloudNativeManagement/statement.style.js

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 3 remain after this review.

📝 Walkthrough

Walkthrough

The homepage hero preview now uses responsive image and video sizing. The right column clips overflow and centers its content. Mobile-specific video sizing overrides are removed.

Changes

Homepage hero preview

Layer / File(s)	Summary
Responsive hero media `src/sections/Home/CloudNativeManagement/index.js`, `src/sections/Home/CloudNativeManagement/statement.style.js`	`ReactPlayer` now uses full-width sizing and a maximum width. The right column clips overflow and centers its content. Images and videos use responsive dimensions, with video dimensions set to a 16:9 ratio. The mobile-only fixed video height and transform override are removed. The hero description formatting changes without changing its wording.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Medium

Suggested reviewers: dhruveshmishra

Merge Risk: ⚪ Minimal · up to 3ed70

The hero media is constrained to its responsive column, and the investigated overflow concern is not reachable at the cited widths. No current-head issue is identified that should block merging.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: preventing homepage hero preview overflow on mid-range screens.
Linked Issues check	✅ Passed	Issue `#8091` requires the hero preview to remain within `.right-col` and scale without horizontal overflow. The PR sets the ReactPlayer, `.imgHero`, and `.vidHero` to the available width with `maxWidth…
Out of Scope Changes check	✅ Passed	The changes are limited to the homepage hero component and its styles. Paragraph rewrapping preserves existing text. JSX cleanup, responsive media rules, spacing, and overflow handling support the fix…
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2…

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create a new PR

Warning

Some tools did not complete. Review the errors below.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/sections/Home/CloudNativeManagement/statement.style.js

Parsing error: [BABEL] /src/sections/Home/CloudNativeManagement/statement.style.js: babel-preset-gatsby has been loaded, which consumes config generated by the Gatsby CLI. Set NODE_ENV=test to bypass, or run gatsby build first. (While processing: "/node_modules/babel-preset-gatsby/index.js")

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

github-actions · 2026-09-21T18:29:16Z

Preview deployment for PR #8105 removed.

This PR preview was automatically pruned because we keep only the 3 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.

piyushtripathi9424 · 2026-09-22T06:07:30Z

Give a screen recording of the fix, by doing adjustment in responsiveness and showing that the right section is now properly fixed and not showing overflow.

Copilot

Note

Copilot was unable to run its full agentic suite in this review.

Copilot review overview

Review effort: Lite
Findings: None

What changed in this PR

This PR fixes homepage hero media overflow on intermediate and mobile screen sizes by making the video and image media responsive within the right-hand column.

Changes:

Constrains ReactPlayer to the parent container using percentage-based sizing.
Adds centered, clipped layout behavior to the media column.
Applies responsive sizing and 16:9 behavior to the hero video while removing the obsolete mobile offset and fixed height.

File	Description
`src/sections/Home/CloudNativeManagement/index.js`	Updates `ReactPlayer` sizing and wrapper styles for responsive scaling.
`src/sections/Home/CloudNativeManagement/statement.style.js`	Adds media constraints, flex centering, overflow handling, and responsive video styling.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

tejaswiverma121-byte · 2026-09-22T06:54:30Z

@piyushtripathi9424 added the video reference and changed one more thing i have given a few padding between those images so that it look good

piyushtripathi9424 · 2026-09-22T14:03:22Z

@piyushtripathi9424 added the video reference and changed one more thing i have given a few padding between those images so that it look good

LGTM 🚀

dhruveshmishra

One small improvement: I’d prefer explicit sizing on .imgHero/.vidHero (width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9) instead of relying on inherited widths and vertical offsets, since that’s more robust across browsers and reduces the chance of future overflow regressions

tejaswiverma121-byte · 2026-09-22T16:45:30Z

i have made the changes as per requested @dhruveshmishra

- Constrain ReactPlayer container to width 100% and maxWidth 100% - Add overflow hidden and flex centering to right-col - Set imgHero and vidHero to maintain responsive 16:9 aspect ratio - Remove obsolete fixed-height and offset transform from mobile query Fixes layer5io#8091 Signed-off-by: tejaswiverma <tejaswiverma121@gmail.com>

dhruveshmishra requested a lite review from Copilot September 22, 2026 06:15

Copilot AI reviewed Sep 22, 2026

View reviewed changes

dhruveshmishra reviewed Sep 22, 2026

View reviewed changes

tejaswiverma121-byte force-pushed the fix/8091-homepage-hero-preview-overflow branch from 6967bcb to 3ed70bb Compare September 26, 2026 08:07

Navigation Menu

fix: prevent homepage hero preview image overflow on mid-range screens - #8105

fix: prevent homepage hero preview image overflow on mid-range screens#8105
tejaswiverma121-byte wants to merge 1 commit into
layer5io:masterfrom
tejaswiverma121-byte:fix/8091-homepage-hero-preview-overflow

tejaswiverma121-byte commented Sep 21, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Sep 21, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

github-actions Bot commented Sep 21, 2026 •

edited

Loading

Uh oh!

piyushtripathi9424 commented Sep 22, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

tejaswiverma121-byte commented Sep 22, 2026

Uh oh!

piyushtripathi9424 commented Sep 22, 2026

Uh oh!

dhruveshmishra left a comment

Uh oh!

tejaswiverma121-byte commented Sep 22, 2026

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

tejaswiverma121-byte commented Sep 21, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes:

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Sep 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

github-actions Bot commented Sep 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

piyushtripathi9424 commented Sep 22, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

Uh oh!

tejaswiverma121-byte commented Sep 22, 2026

Uh oh!

piyushtripathi9424 commented Sep 22, 2026

Uh oh!

dhruveshmishra left a comment

Choose a reason for hiding this comment

Uh oh!

tejaswiverma121-byte commented Sep 22, 2026

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

tejaswiverma121-byte commented Sep 21, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Sep 21, 2026 •

edited

Loading

github-actions Bot commented Sep 21, 2026 •

edited

Loading