fix(playground): resolve layout distortion and hero elements overlap

[nishtha-agarwal-211]

Description

This PR resolves the layout distortion and hero element overlap issue in the Interactive Python Playground section on the homepage when the Playground category tab is active. (Closes #509)

---

The Problem

When switching to the Playground category:

• The projects list becomes hidden, reducing the height of the main content wrapper.
• .playground-section lacked:
  • its own stacking context
  • relative positioning
  • a solid background

Because of this, decorative elements from .hero-section (background grids, floating code snippets, canvas elements, etc.) overlapped into the playground editor and console output area, making the UI distorted and partially unreadable.

---

The Solution

Added the following styles to .playground-section in web-app/index.html:

position: relative;
z-index: 2;
background-color: var(--bg-color);

These changes ensure:

• proper stacking behavior
• hero decorations stay behind the playground
• editor and console render correctly without overlap

[vercel]

@nishtha-agarwal-211 is attempting to deploy a commit to the Anuj's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Copilot]

Pull request overview

This PR aims to prevent decorative hero-layer elements from visually overlapping the Interactive Python Playground area by giving .playground-section its own stacking context and an opaque background.

Changes:

• Added position: relative and z-index: 2 to .playground-section to ensure it layers above hero decorations.
• Added background-color: var(--bg-color) to make the playground area opaque and avoid bleed-through/overlap artifacts.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[steam-bell-92]

@nishtha-agarwal-211 can you share ss

[nishtha-agarwal-211]

Attached the screenshot after applying the fix.

[github-actions]

🎉 Thank you for your contribution!

Your Pull Request has been merged successfully.

We appreciate the time and effort you put into improving this project. Contributions like yours help the repository grow and stay useful for everyone.

If you'd like to contribute again, please check the open issues and make sure you are assigned before opening another Pull Request.

Thanks again for your support! 🙌