Fix hero section text overlap on small and medium screens

[skyforge-glitch]

Fixes #522

Summary

This PR fixes an issue where the decorative hero pattern overlaps the text on small and medium screen sizes, affecting readability.

The pattern is hidden below the lg breakpoint to prevent overlap and layout issues, while preserving the existing desktop layout.

Details

• Prevents decorative SVG patterns from overlapping hero content on sm and md breakpoints
• Ensures clean, readable layout on smaller screens
• Keeps the original design intact for large screens

Notes

A future enhancement could explore repositioning the pattern on tablet-sized screens instead of hiding it.

Summary by CodeRabbit

• Style
  • Improved responsive design of the banner with optimized visibility of decorative elements across different screen sizes.

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

[vercel]

@skyforge-glitch 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 is updated to address responsive layout issues by conditionally rendering decorative Pattern elements on larger viewports only, while reordering the wrapper's class list for clarity. This prevents horizontal overflow between 640px–1024px viewport widths by hiding these elements on smaller screens.

Changes

Cohort / File(s)	Summary
Responsive Pattern Visibility src/components/Banner.jsx	Two decorative Pattern elements now conditionally rendered with hidden lg:block classes, visible only on large screens (lg breakpoint and above). Wrapper classes reordered from overflow-hidden lg:relative to relative overflow-hidden. Pattern positioning and sizing adjusted with max-w-full constraints to prevent overflow on medium viewports.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A hop and a skip through responsive views,
Patterns now hide when viewports shrink too,
On desktop they bloom in their full-screen glory,
While medium screens avoid overflow's worry—
Layout shifts mended with classes so tidy! ✨

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ 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 directly matches the main change: hiding decorative patterns on small/medium screens to fix text overlap issues in the hero section.
Linked Issues check	✅ Passed	The PR addresses issue #522 by hiding SVG patterns below the lg breakpoint, eliminating the overflow and layout shift that occurred between 640px–1024px viewports.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing hero section overflow by adjusting Pattern component visibility and positioning; no unrelated modifications detected.

✨ 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 (1)

src/components/Banner.jsx (1)

10-11: Pattern visibility changes correctly address the overflow issue.

The addition of hidden lg:block effectively resolves the horizontal overflow and text overlap on small and medium screens (640px–1024px) by hiding the decorative patterns below the lg breakpoint. The max-w-full class provides additional overflow protection on larger screens.

Optional: Consider simplifying the positioning classes.

The positioning classes on both Pattern elements are quite complex with multiple breakpoint-specific adjustments. While functionally correct, consider extracting these into named CSS classes or documenting the positioning logic for future maintainability.

📜 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 ef33810.

📒 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 (1)

src/components/Banner.jsx (1)

8-8: The positioning change is correct and improves the implementation.

The class change from "overflow-hidden lg:relative" to "relative overflow-hidden" is intentional and functionally sound. The Pattern elements are now hidden on smaller screens using the semantic hidden lg:block class, making the wrapper's unconditional relative positioning safe — it won't affect layout on sm/md screens where the patterns are hidden, and it provides the necessary positioning context on lg+ screens where they're visible.

[skyforge-glitch]

Hi mentors 👋

This PR addresses the hero section overlap issue on sm–md screens (640–1024px) by adjusting pattern visibility at responsive breakpoints.

I noticed PR #516 works on a similar area using layout adjustments.
This PR takes a breakpoint-specific approach to ensure consistent readability across edge widths.

Happy to iterate, rework, or combine approaches based on your feedback.
Looking forward to your review. Thanks!