fix: resolve hero section horizontal overflow on medium screens (640p…

[rishu229]

• Added overflow-hidden to Banner component container
• Wrapped Pattern components in constrained container with gradient mask
• Applied CSS gradient mask for smooth fade effect on patterns that looks much better
• Ensures no horizontal scroll between 640px-1024px viewports

Fixes #522

Summary by CodeRabbit

Style

• Refined banner visual hierarchy with improved element layering and stacking order.
• Added gradient fade effect to decorative overlay elements for enhanced visual depth and improved content contrast.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

@rishu229 is attempting to deploy a commit to the AOSSIE Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

The Banner component restructures its decorative patterns and content layering. Pattern elements are now wrapped in an absolute overlay with CSS gradient masking. Content elements are repositioned within a higher stacking context (z-10), addressing responsive layout overflow occurring between 640px–1024px viewports.

Changes

Cohort / File(s)	Summary
Banner Component Layout & Masking src/components/Banner.jsx	CSS class reordering (overflow-hidden lg:relative → relative overflow-hidden); Pattern elements relocated into single absolute overlay with gradient maskImage/WebkitMaskImage applied; new non-interactive overlay div (pointer-events-none) for masking; content wrapper repositioned with z-10 stacking context; all original content retained within updated element hierarchy (+16/-5 lines)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Patterns dance with gradient grace,
Masking layers, finding space!
Z-stacks climb where overflow creeps,
Responsive harmony the banner keeps. 🎨✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing horizontal overflow in the hero section on medium screens, directly addressing issue #522.
Linked Issues check	✅ Passed	The code changes successfully address the linked issue #522 by implementing overflow containment and masking patterns to prevent horizontal overflow and layout shifts on 640px–1024px viewports.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the hero section overflow issue; no out-of-scope modifications were introduced beyond the scope of issue #522.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/components/Banner.jsx (2)

12-21: Clean implementation of the gradient mask overlay.

The mask approach effectively fades the Pattern components without removing them entirely, maintaining visual appeal while preventing overflow. Good use of pointer-events-none to ensure the decorative overlay doesn't interfere with interactions.

One minor observation: consider using Tailwind's arbitrary value syntax if you want to keep styles in the className for consistency:

className="absolute inset-0 overflow-hidden pointer-events-none [mask-image:linear-gradient(to_right,transparent_0%,black_20%,black_60%,transparent_100%)] [-webkit-mask-image:linear-gradient(to_right,transparent_0%,black_20%,black_60%,transparent_100%)]"

However, the inline style approach is equally valid and arguably more readable for complex gradients.

---

20-20: Consider reordering visibility classes for mobile-first convention.

The classes work correctly, but invisible sm:visible follows Tailwind's mobile-first convention more clearly (base state first, then breakpoint overrides).

♻️ Suggested reorder

-            <Pattern className="absolute mt-2 -top-32 left-0 w-full sm:left-3/4 sm:top-36 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3 sm:visible invisible" />
+            <Pattern className="invisible sm:visible absolute mt-2 -top-32 left-0 w-full sm:left-3/4 sm:top-36 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3" />

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dfb8668 and 9349f2c.

📒 Files selected for processing (1)

• src/components/Banner.jsx

🧰 Additional context used

🧬 Code graph analysis (1)

src/components/Banner.jsx (2)

src/components/ContainerPattern.jsx (1)

• ContainerPattern (10-12)

src/components/Pattern.jsx (1)

• Pattern (3-59)

🔇 Additional comments (2)

src/components/Banner.jsx (2)

8-8: LGTM – overflow-hidden correctly clips pattern overflow.

Adding overflow-hidden to the container addresses the root cause of horizontal scroll by clipping any Pattern elements that extend beyond the viewport on medium screens.

---

23-37: Proper stacking context for content visibility.

Wrapping content in relative z-10 ensures text and the CTA button remain above the masked pattern overlay. This is the correct approach for maintaining content accessibility while layering decorative elements below.